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:

• 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