React Rebass is a front-end framework that was designed keeping react in mind. In this article, we will know what are Props in React Rebase. The prop is an important component that is required in each development.
Props are used for setting design constraints, ensuring easy accessibility to designs. It also helps in making responsive designs. There are many props that can be used and they all have different purposes and ways to use them.
Syntax:
<Component Prop='HelloProp'></Component>
List of available Props: Following is the list of props available in react rebass.
- Rebass sx Prop
- Rebass as Prop
- Rebass Colors Prop
- Rebass Margin and Padding Prop
- Rebass Typography Prop
- Rebass Layout Prop
- Rebass Flexbox Prop
Let’s understand them in detail.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: Install React Rebass and form components in your given directory.
npm i rebass
Project Structure: It will look like the following.
Rebass sx Prop: The sx Prop is used to add styling to the component. it accepts a style object which has the style to be used for the component.
Syntax:
<component sx={{ style }}></component>Example: In this example, we are using the sx prop to add styling to the buttons.
import React from "react";
import { Button } from "rebass";
import { Text } from "rebass";
const gfg = () => { return (
<div id="gfg">
<Text
fontSize={[3, 4, 5]}
fontWeight='bold'
color='green'
ml="42%">
Geeksforgeeks
</Text>
<Button
sx={{
fontSize: 3,
margin: 20,
}}
color="white"
bg="green"
mr={3}
ml="40%">
LogIn
</Button>
<Button sx={{
fontSize: 3,
margin: 20,
}} color="white"
bg="blue" mr={3}
variant='outline'>
LogOut
</Button>
<Button
sx={{
fontSize: 3,
margin: 20,
}} color="white"
bg="red"
disabled="false">
Subscribe
</Button>
</div>
);
}; export default gfg;
|
Output:
Rebass as Prop: as Prop is used to render the providing HTML element. it takes HTML element as its parameter.
Syntax:
<component as='element'></component>
Example: In this example, we are using the as prop to render the button as anchor tag.
import React from "react";
import { Button } from "rebass";
import { Text } from "rebass";
const gfg = () => { return (
<div id="gfg">
<Text
fontSize={[3, 4, 5]}
fontWeight='bold'
color='green'
ml="42%">
Geeksforgeeks
</Text>
<Button
as='a'
color="white"
bg="green"
mr={3}
ml="40%">
LogIn
</Button>
<Button
as='a'
color="white"
bg="blue" mr={3}
variant='outline'>
LogOut
</Button>
<Button
as='a'
color="white"
bg="red"
disabled="false">
Subscribe
</Button>
</div>
);
}; export default gfg;
|
Output:
Rebass Colors Props: Colors are used to add colors in Props. it takes string value as parameter to be set as colors.
Syntax:
<component Color='string' ></component>
Example: In this example, we are using the color prop to give color to the text element.
import React from "react";
import { Text } from "rebass";
const gfg = () => { return (
<div id="gfg">
<Text
fontSize={[3, 4, 5]}
fontWeight='bold'
color='green'
ml="42%">
Geeksforgeeks
</Text>
<br/>
<center>
<Text
color="blue">
DSA
</Text>
<Text
color="yellow">
Coding
</Text>
<Text
color="red">
Web Development
</Text>
</center>
</div>
);
}; export default gfg;
|
Output:
Rebass Margin and padding Props: Margin and padding are used to add Margin and padding in Props. it takes number object value as parameter to be set. available values are:-
- m: margin
- mt: margin-top
- mr: margin-right
- mb: margin-bottom
- ml: margin-left
- mx: margin-left and margin-right
- my: margin-top and margin-bottom
- p : padding
- pt: padding-top
- pr: padding-right
- pb: padding-bottom
- pl: padding-left
- px: padding-left and padding-right
- py: padding-top and padding-bottom
Syntax:
<component margin_prop ={number}></component>Example: In this example, we are adding margin and padding prop to the elements.
import React from "react";
import { Text } from "rebass";
const gfg = () => { return (
<div id="gfg">
<Text
fontSize={[3, 4, 5]}
fontWeight='bold'
color='green'
ml="42%">
Geeksforgeeks
</Text>
</div>
);
}; export default gfg;
|
Output:
Rebass Typography Props: Typography is used to give text style in Props. available values are:-
- fontSize
- fontFamily
- fontWeight
- lineHeight
- letterSpacing
- textAlign
- fontStyle
Syntax:
<component typographic_prop = 'value' ></component>
Example: In this example, we are adding typography to the link component.
import React from "react";
import { Link } from "rebass";
const gfg = () => { return (
<div id="gfg">
<center>
<Link
fontFamily='cursive'
fontSize={[5,5,]}
Geeksforgeeks
</Link>
</center>
</div>
);
}; export default gfg;
|
Output:
Rebass Layout Props: Layout is used to change the width, height, display and other values on any element. available values are:-
- width
- minWidth
- maxWidth
- height
- minHeight
- maxHeight
- display
- size (width and height)
- verticalAlign
- overflow
Syntax:
<component layout_value = 'value' ></component>
Example: In this example, we are adding layout to the box element.
import React from "react";
import { Box } from "rebass";
const gfg = () => { return (
<div id="gfg">
<center>
<br/>
<Box
display='grid'
bg='red'
width={128}
height={128} >
Geeksforgeeks
</Box>
</center>
</div>
);
}; export default gfg;
|
Output:
Rebass Flexbox Props: Flexbox is used to add flexbox props in layout styles. available values are:-
- alignItems
- alignContent
- justifyItems
- justifyContent
- flexWrap
- flexDirection
- flex
- flexGrow
- flexShrink
- flexBasis
- justifySelf
- alignSelf
- order
Syntax:
<component flexbox_value ='value' ></component>
Example: In this example, we are adding flex prop to the box component.
import React from "react";
import { Box,Flex } from 'rebass'
const gfg = (props) => { return (
<Flex>
<Box
flex='1 1 auto'
display='inline-block'
width={200}
height={200}
p={5}>
<h1>GeeksforGeeks</h1>
</Box>
</Flex>
);
}; export default gfg;
|
Output:
Reference: https://rebassjs.org/props