Skip to content
Related Articles

Related Articles

React Rebass Props

Improve Article
Save Article
Like Article
  • Last Updated : 28 Dec, 2021

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.

Folder Structure

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.

App.js




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 sx Prop

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.

 

App.js




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'
        href="https://www.geeksforgeeks.org/"
        color="white"
        bg="green"
        mr={3}
        ml="40%">
        LogIn
      </Button>
      <Button 
        as='a'
        href="https://www.geeksforgeeks.org/"
        color="white"
        bg="blue" mr={3}
        variant='outline'>
        LogOut
      </Button>
      <Button
        as='a'
        href="https://www.geeksforgeeks.org/" 
        color="white"
        bg="red"
        disabled="false">
        Subscribe
      </Button>
    </div>
  );
};
  
export default gfg;

Output:

Rebass as Prop

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.

App.js




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 Colors Props

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.

App.js




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 Margin and padding Props

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.

App.js




import React from "react";
import { Link } from "rebass";
  
const gfg = () => {
  return (
    <div id="gfg">
      <center>
      <Link
        fontFamily='cursive'
        fontSize={[5,5,]}
        href='https://www.geeksforgeeks.org/'>
        Geeksforgeeks
      </Link>
      </center>
    </div>
  );
};
  
export default gfg;

Output:

Rebass Typography Props

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.

App.js




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 Layout Props

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.

App.js




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:

Rebass Flexbox Props

Reference: https://rebassjs.org/props


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!