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.
The order prop sorts in ascending order the React Suite FlexGrid items according to the value passed to the prop. It takes a number as a parameter.
Syntax:
<FlexboxGrid.Item order={}> </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 then install create-react-app globally by using the command npm -g create-react-app or can 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: 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 some inline styling.
App.js
import { FlexboxGrid } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h4>React Suite FlexboxGrid Order</h4> <FlexboxGrid> <FlexboxGrid.Item style={{ border: "1px solid green", padding: "10px", margin: "10px" }} > 4 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid yellow", padding: "10px", margin: "10px", }} > 1 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid blue", padding: "10px", margin: "10px" }} > 3 </FlexboxGrid.Item> <FlexboxGrid.Item style={{ border: "1px solid red", padding: "10px", margin: "10px" }} > 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:
The items will appear the way we have written in our code.
Example 2: Now, using the above example we are adding the order prop to every <FlexboxGrid.Item> component, and we are passing the value assigned to every item to the prop.
App.js
import { FlexboxGrid } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div className="App"> <h4>React Suite FlexboxGrid Order</h4> <FlexboxGrid> <FlexboxGrid.Item order={4} style={{ border: "1px solid green", padding: "10px", margin: "10px" }} > 4 </FlexboxGrid.Item> <FlexboxGrid.Item order={1} style={{ border: "1px solid yellow", padding: "10px", margin: "10px", }} > 1 </FlexboxGrid.Item> <FlexboxGrid.Item order={3} style={{ border: "1px solid blue", padding: "10px", margin: "10px" }} > 3 </FlexboxGrid.Item> <FlexboxGrid.Item order={2} style={{ border: "1px solid red", padding: "10px", margin: "10px" }} > 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:
using order
It appears in a sorted manner, not like the order we have written it in our code.
Reference: https://rsuitejs.com/components/flexbox-grid/#code-lt-flexbox-grid-item-gt-code
