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": "neveropen",             "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' }}>neveropen</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' }}>neveropen</h1>             <h3>React Suite Cascader Block</h3>             <Cascader block data={options} />         </div>     ); } |
Output:
Â
Reference: https://rsuitejs.com/components/cascader/#block
