Horje
React Suite FlexboxGrid Component

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. FlexboxGrid component allows the user to use 24 grids as it is a grid layout component that is implemented via CSS Flexbox. We can use the following approach in ReactJS to use the React Suite FlexboxGrid Component.

FlexboxGrid Props:

  • align: It is used for the alignment.
  • classPrefix: It is used to denote the prefix of the component CSS class.
  • justify: It is used for the horizontal arrangement.

FlexboxGrid.Item Props:

  • classPrefix: It is used to denote the prefix of the component CSS class.
  • colspan: It is used to denote the spacing between grids.
  • order: It is used to denote the grid orders for sorting.
  • componentClass: It can be used for the custom element for this component.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

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

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Project Structure: It will look like the following.

Project Structure[/caption]

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Filename: App.js

javascript

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { FlexboxGrid } from 'rsuite'
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React Suite FlexboxGrid Component</h4>
      <FlexboxGrid>
        <FlexboxGrid.Item style={{ backgroundColor: 'red' }} 
                          colspan={1}>
          colspan={1}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'yellow' }} 
                          colspan={2}>
          colspan={2}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'green' }} 
                          colspan={3}>
          colspan={3}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'lightblue' }}
                          colspan={4}>
          colspan={4}</FlexboxGrid.Item>
      </FlexboxGrid>
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

 

Example 2

In this example, we will learn about “space-around”. It is used to justify FlexboxGrid.

Javascript

import React from 'react'
import 'rsuite/dist/rsuite.min.css';
import { FlexboxGrid } from 'rsuite'
  
export default function App() {
  
return (
    <div >
  <h1 style={{color:'green'}}>GeeksforGeeks</h1>
    <h4>React Suite FlexboxGrid Component</h4>
    <FlexboxGrid justify="space-between">
        <FlexboxGrid.Item style={{ backgroundColor: 'red',color:'white' }}
                        colspan={4} >
        colspan={4}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'yellow' ,color:'black'}}
                        colspan={4}>
        colspan={4}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'green' ,color:'white'}}
                        colspan={4}>
        colspan={4}</FlexboxGrid.Item>
        <FlexboxGrid.Item style={{ backgroundColor: 'lightblue' ,color:'black'}}
                        colspan={4}>
        colspan={4}</FlexboxGrid.Item>
    </FlexboxGrid>
    </div>
);
}

OUTPUT

 

Reference: https://rsuitejs.com/components/flexbox-grid/


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
React Suite Container Component React Suite Container Component
React Suite Loader Component React Suite Loader Component
React Suite Message Component React Suite Message Component
ReactJS Evergreen StatusIndicator Component ReactJS Evergreen StatusIndicator Component
ReactJS Evergreen Switch Component ReactJS Evergreen Switch Component

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 9



 

Horje