React Suite Cascader Block

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. Cascader component is used as a cascade selection box. It helps the user in a Single selection of data with a hierarchical relationship structure. Block in cascader helps to create a cascader like a block element in HTML. It will occupy the whole space as a block.

Syntax:

<Cascader block data={data} />

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.

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

Javascript

import react from 'react'
import { Cascader } from 'rsuite';
import 'rsuite/dist/rsuite.min.css';

export default function App() {
    // Sample Options
    const options = [
        {
            "label": "GeeksforGeeks",
            "value": 1,
            "children": [
                {
                    "label": "Machine Learning",
                    "value": 2
                },
                {
                    "label": "Data Structures",
                    "value": 3,

                }
            ]
        },
        {
            "label": "StackOverFlow",
            "value": 8,
            "children": [
                {
                    "label": "Databases",
                    "value": 9
                },
                {
                    "label": "Operating System",
                    "value": 10,

                }
            ]
        },
        {
            "label": "Tutorial Point",
            "value": 13,
            "children": [
                {
                    "label": "Engineering Mathematics",
                    "value": 14
                },
                {
                    "label": "Theory of Computation",
                    "value": 15
                }
            ]
        }
    ]

    return (
        <div className="App">
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>React Suite Cascader Block</h3>
            <Cascader block data={options} />
        </div>
    );
}

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

npm start

Output:

Example 2: In this example, we will create a nested cascader (options inside options) and use the block keyword with it.

Javascript

import react from 'react'
import { Cascader } from 'rsuite';
import 'rsuite/dist/rsuite.min.css';

export default function App() {
    // Sample Options
    const options = [
        {
            "label": "Uttar Pradesh",
            "value": 1,
            "children": [
                {
                    "label": "Moradabad",
                    "value": 2
                },
                {
                    "label": "Bareilly",
                    "value": 3,
                    "children": [
                        {
                            "label": "Vijay Nagar",
                            "value": 4
                        },
                        {
                            "label": "Rajiv Gandhi Square",
                            "value": 5
                        },
                        {
                            "label": "MR 10",
                            "value": 6
                        },
                    ]
                },
                {
                    "label": "Lucknow",
                    "value": 7
                }
            ]
        }
    ]
    return (
        <div className="App">
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>React Suite Cascader Block</h3>
            <Cascader block data={options} />
        </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/cascader/#block