React Suite Cascader Appearance

0 0 2 minutes read

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 appearance prop defines the way how the Cascader will visually appear to the users. It has two options, it takes a value either “default” or “subtle”.

Syntax:

<Cascader appearance=""  />

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: We are importing the Cascader Component from “rsuite” and applying the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

We are adding a Cascader component and we are passing a list named data containing the names of countries to the data prop of the component, to the placeholder and the appearance we are passing “default”.

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 Appearance</h4> 
            <p> 
                <b style={{ marginLeft: 30 }}> 
                    appearance = "default"</b> 
            </p> 
            <Cascader 
                placeholder="default"
                data={countries} 
                appearance="default"
                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:

Example: We are adding a Cascade component and we are passing a list named data containing the names of countries to the data prop of the component, to the placeholder, and the appearance we are passing “subtle”.

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 Appearance</h4> 
            <p> 
                <b style={{ marginLeft: 30 }}> 
                    appearance = "subtle"</b> 
            </p> 
            <Cascader 
                placeholder="subtle"
                data={countries} 
                appearance="subtle"
                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:

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!