React Rebass is a front-end framework that was designed keeping react in mind. React Rebass is built with a Styled System. It is the best choice to create prototypes and UI without needing to invest time in building a custom design system up-front. React Rebass provides us with flexible components.
Installation: You can install Rebass with the help of npm or yarn by following commands:
npm i rebass // or yarn add rebass
Now, you can easily import components from Rebass in your application like –
import { Text } from 'rebass';
By default, Rebass component does not include a theme in them. You can add a theme to your application with a ThemeProvider component and by providing a theme in context.
npm i @rebass/preset emotion-theming
Now, you can use ThemeProvider component as:
import { ThemeProvider } from 'emotion-theming';
import theme from '@rebass/preset';
Creating react application:
Step 1: Create a React app.
npx create-react-app appname
Step 2: Change directory to appname.
cd appname
Project Structure: Now, the app structure will look like this.
Example 1: In this example, we are creating a basic example of Rebass.
App.js
import React from "react"; import { Image } from 'rebass'; function App() { return ( <div> <Image src=" sx={{ width: ['100%', '50%'], borderRadius: 8, }} /> </div> ) } export default App; |
Output:
Example 2: In this example, we are creating a basic input input field using Rebass.
App.js
import React from "react"; import { Label, Input } from '@rebass/forms'import { Box } from 'rebass' function App() { return ( <div style={{padding: "200px"}}> <Box> <Label htmlFor='email'>Email</Label> <Input id='email' name='email' type='email' placeholder='hello@example.com' /> </Box> </div> ) } export default App; |
Output:
