React Suite Cascader Custom options

Last Updated : 23 Jul, 2025

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.

Syntax:

<Cascader renderMenu={}  
    renderMenuItem={}  
    renderValue={}
/>

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", LocationIcon from "@rsuite/icons/Location" and applying the default styles of the components we are importing "rsuite/dist/rsuite.min.css".

To the Cascader component, we are passing a list named data containing the names of countries to the data prop of the component and some inline styling, We are creating a list named as a name. Now to the renderMenuItem we are passing the label in <em> tags, for the renderValue we are showing the location icon along with the value, and for the renderMenu we are showing the names from the list name at any index, represented by the layer(0,1,2) and then showing the menu.

App.js

import { Cascader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import LocationIcon from "@rsuite/icons/Location";

function App() {
    const countries = [
        {
            label: "India",
            value: "India",
            children: [
                {
                    label: "Haryana",
                    value: "Haryana",
                },
                {
                    label: "Assam",
                    value: "Assam",
                    children: [
                        {
                            label: "Darrang",
                            value: "Darrang",
                        },
                        {
                            label: "Dhemaji",
                            value: "Dhemaji",
                        },
                    ],
                },
                {
                    label: "West Bengal",
                    value: "West Bengal",
                    children: [
                        {
                            label: "Hooghly",
                            value: "Hooghly",
                        },
                        {
                            label: "Darjeeling",
                            value: "Darjeeling",
                        },
                    ],
                },
                {
                    label: "Nagaland",
                    value: "Nagaland",
                },
            ],
        },
        {
            label: "Germany",
            value: "Germany",
        },
        {
            label: "Sri Lanka",
            value: "Sri Lanka",
        },
    ];

    const name = ["Country", "State", "District"];
    return (
        <div className="App">
            <h4> React Suite Cascader Custom options</h4>

            <Cascader
                data={countries}
                style={{ marginLeft: 80, marginTop: 10 }}
                renderMenuItem={(label) => {
                    return (
                        <div>
                            <em>{label}</em>
                        </div>
                    );
                }}
                renderValue={(value) => {
                    return (
                        <b>
                            <LocationIcon />
                            {value}
                        </b>
                    );
                }}
                renderMenu={(children, menu, parentNode, layer) => {
                    return (
                        <div>
                            <div
                                style={{
                                    background: "green",
                                    border: "2px solid #34382e",
                                    padding: "4px",
                                    color: "white",
                                    textAlign: "center",
                                }}
                            >
                                {name[layer]}
                            </div>
                            {menu}
                        </div>
                    );
                }}
            />
        </div>
    );
}

export default App;

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

npm start

Output:

Example 2: We are importing the Cascader Component from "rsuite", LocationIcon from "@rsuite/icons/Location",CheckIcon from "@rsuite/icons/Check",PageEndIcon from "@rsuite/icons/PageEnd" and applying the default styles of the components we are importing "rsuite/dist/rsuite.min.css".

To the Cascader component, we are passing a list named data containing the names of countries to the data prop of the component and some inline styling, Now to the renderMenuItem we are passing the label in <em> tags along with CheckIcon, for the renderValue we are showing the location icon along with activeLabel value joining using '-', and for the renderMenu we are showing the layer (0,1,2) and then showing the menu.

App.js

import { Cascader } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import LocationIcon from "@rsuite/icons/Location";
import CheckIcon from "@rsuite/icons/Check";
import PageEndIcon from "@rsuite/icons/PageEnd";
function App() {
    const countries = [
        {
            label: "India",
            value: "India",
            children: [
                {
                    label: "Haryana",
                    value: "Haryana",
                },
                {
                    label: "Assam",
                    value: "Assam",
                    children: [
                        {
                            label: "Darrang",
                            value: "Darrang",
                        },
                        {
                            label: "Dhemaji",
                            value: "Dhemaji",
                        },
                    ],
                },
                {
                    label: "West Bengal",
                    value: "West Bengal",
                    children: [
                        {
                            label: "Hooghly",
                            value: "Hooghly",
                        },
                        {
                            label: "Darjeeling",
                            value: "Darjeeling",
                        },
                    ],
                },
                {
                    label: "Nagaland",
                    value: "Nagaland",
                },
            ],
        },
        {
            label: "Germany",
            value: "Germany",
        },
        {
            label: "Sri Lanka",
            value: "Sri Lanka",
        },
    ];


    return (
        <div className="App">
            <h4> React Suite Cascader Custom options</h4>
            <Cascader
                data={countries}
                style={{ marginLeft: 80, marginTop: 10 }}
                renderMenuItem={(label) => {
                    return (
                        <div>
                            <em>
                                <CheckIcon style={{ color: "green" }} />

                                {label}
                            </em>
                        </div>
                    );
                }}
                renderValue={(value, activeItemLabel) => {
                    return (
                        <b style={{ color: "black" }}>
                            <LocationIcon />
                            {activeItemLabel.map(
                                (item) => item.label).join(" - ")}
                        </b>
                    );
                }}
                renderMenu={(children, menu, parentNode, layer) => {
                    return (
                        <div>
                            <div
                                style={{
                                    background: "#D5073F",
                                    border: "2px solid #34382e",
                                    padding: "4px",
                                    color: "white",
                                    textAlign: "center",
                                }}
                            >
                                Layer :{layer}
                            </div>
                            {menu}
                        </div>
                    );
                }}
            />
        </div>
    );
}

export default App;

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

npm start

Output:

Reference: https://rsuitejs.com/components/cascader/#custom-options

React Introduction

aniluom

Improve

Article Tags :

React Suite Cascader Custom options

Similar Reads

React Fundamentals

Components in React

React Hooks

Routing in React

Advanced React Concepts

React Projects

Thank You!

What kind of Experience do you want to share?