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:
- Introduction and installation reactJS
- React Suite FlexboxGrid Component
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
