Open In App

React Suite <FlexboxGrid.Item> Props

Improve
Improve
Like Article
Like
Save
Share
Report

React Suite is a front-end library designed for the middle platform and back-end products. React Suite FlexboxGrid component allows the user to use 24 grids as it is a grid layout component. <FlexboxGrid.Item> component defines the items within a FlexboxGrid component.

The props are:

  • as: It denotes the element type of the component. It is ‘div’ by default but one can custom the element for this component.
  • order: It defines the order of the <FlexboxGrid.Item> Component. It is denoted by a number.
  • colspan: It denotes the spacing between grids. Denoted by number. The default value is 0.
  • classPrefix: This denotes the prefix of the component CSS class. Specifying any value here will change the name of the class of the Component. This can be useful for applying custom styling based on the class name. The default value is “flex-box-grid-item”.

Syntax:

<FlexboxGrid.Item> </FlexboxGrid.Item>

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: Now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

 

Example 1: In this example, we will look into the order and as props. We are importing the FlexboxGrid Component from rsuite, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

Within the FlexboxGrid component, we are adding <FlexboxGrid.Item> component with some numbers and adding some styles to it which we have defined in the style. To all the <FlexboxGrid.Item> we are passing the order prop with some numbers. and to the last two <FlexboxGrid.Item> components we are passing the as prop as “h1” and “h4” respectively.

App.js




import { FlexboxGrid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    width: 30,
    border: "2px solid green",
    textAlign: "center",
  };
  return (
    <div className="App">
      <h4> React Suite <FlexboxGrid.Item> Prop </h4>
  
      <FlexboxGrid>
        <FlexboxGrid.Item style={style} order={3}>
          3
        </FlexboxGrid.Item>
        <FlexboxGrid.Item as={"h1"} style={style} order={1}>
          1
        </FlexboxGrid.Item>
        <FlexboxGrid.Item as={"h4"} style={style} order={2}>
          2
        </FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Example 2: In this example, we will look into colspan and classPrefix. We are passing the different numbers to the colspan prop in our <FlexboxGrid.Item> component and to the last <FlexboxGrid.Item> component we are passing the classPrefix as ‘btn’, whereas its default value is “flex-box-grid-item” which defines the CSS for button components in react suite. 

App.js




import { FlexboxGrid } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    border: "2px solid green",
    textAlign: "center",
  };
  return (
    <div className="App">
      <h4> React Suite <FlexboxGrid.Item> Prop </h4>
  
      <FlexboxGrid>
        <FlexboxGrid.Item style={style} colspan={4}>
          3
        </FlexboxGrid.Item>
        <FlexboxGrid.Item
          style={style}
          colspan={2}
          classPrefix="flex-box-grid-item"
        >
          1
        </FlexboxGrid.Item>
        <FlexboxGrid.Item style={style} classPrefix="btn">
          2
        </FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}
  
export default App;


Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

 

Reference: https://rsuitejs.com/components/flexbox-grid/#code-lt-flexbox-grid-item-gt-code



Last Updated : 27 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads