React Suite FlexboxGrid Order
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:
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
Last Updated :
28 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...