React Suite Cascader Size

Last Updated : 14 Jul, 2022

React Suite is a front-end library designed for the middle platform and back-end products. React Suite Cascader component is used as a single selection of data with a hierarchical relationship structure.

The size Prop is used to set the size of the Cascader component.

There are four alternatives that are available:

xs: The smallest size that is available
sm: The small size but bigger than the size xs.
md: The medium size is bigger than the sm.
lg: The largest size available.

Syntax:

<Cascader size=""  />

Prerequisite:

Introduction and Installation reactJS
React Suite Cascader 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, install create-react-app globally using the command npm -g create-react-app or 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 Cascader Component from “rsuite” and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css“.

We are adding two Cascader components we are passing a list named data containing the names of countries to the data prop of the component, the first we kept as it is and to the next one we are passing the size prop value as “xs“.

App.js

import { Cascader } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    const countries = [ 
        { 
            label: "India", 
            value: "India", 
            children: [ 
                { 
                    label: "Haryana", 
                    value: "Haryana", 
                }, 
                { 
                    label: "Assam", 
                    value: "Assam", 
                }, 
                { 
                    label: "West Bengal", 
                    value: "West Bengal", 
                }, 
                { 
                    label: "Nagaland", 
                    value: "Nagaland", 
                }, 
            ], 
        }, 
        { 
            label: "Germany", 
            value: "Germany", 
        }, 
        { 
            label: "Sri Lanka", 
            value: "Sri Lanka", 
        }, 
    ]; 
  
    return ( 
        <div className="App"> 
            <h4> React Suite Cascader Size</h4> 
            <p> 
                <b style={{ marginLeft: 30 }}>default</b> 
                <b style={{ marginLeft: 80 }}> size="xs"</b> 
            </p> 
            <Cascader 
                placeholder="default"
                data={countries} 
                size="lg"
                style={{ marginLeft: 30, marginTop: 10 }} 
            /> 
  
            <Cascader 
                placeholder="xsmall"
                data={countries} 
                size="xs"
                style={{ marginLeft: 30, marginTop: 10 }} 
            /> 
        </div> 
    ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

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

Example 2: We are adding four Cascader components and to every component, we are passing different values to the size prop.

App.js

import { Cascader } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    const countries = [ 
        { 
            label: "India", 
            value: "India", 
            children: [ 
                { 
                    label: "Haryana", 
                    value: "Haryana", 
                }, 
                { 
                    label: "Assam", 
                    value: "Assam", 
                }, 
                { 
                    label: "West Bengal", 
                    value: "West Bengal", 
                }, 
                { 
                    label: "Nagaland", 
                    value: "Nagaland", 
                }, 
            ], 
        }, 
        { 
            label: "Germany", 
            value: "Germany", 
        }, 
        { 
            label: "Sri Lanka", 
            value: "Sri Lanka", 
        }, 
    ]; 
  
    return ( 
        <div className="App"> 
            <h4> React Suite Cascader Size</h4> 
            <p> 
                <b style={{ marginLeft: 30 }}>size="lg"</b> 
                <b style={{ marginLeft: 80 }}> size="xs"</b> 
            </p> 
            <Cascader 
                placeholder="large"
                data={countries} 
                size="lg"
                style={{ marginLeft: 30, marginTop: 10 }} 
            /> 
  
            <Cascader 
                placeholder="xsmall"
                data={countries} 
                size="xs"
                style={{ marginLeft: 30, marginTop: 10 }} 
            /> 
            <p> 
                <b style={{ marginLeft: 30 }}>size="md"</b> 
                <b style={{ marginLeft: 80 }}> size="s"</b> 
            </p> 
            <Cascader 
                placeholder="medium"
                data={countries} 
                size="md"
                style={{ marginLeft: 30, marginTop: 10 }} 
            /> 
  
            <Cascader 
                placeholder="small"
                data={countries} 
                size="s"
                style={{ marginLeft: 30, marginTop: 10 }} 
            /> 
        </div> 
    ); 
} 
  
export default App;