React Suite Cascader Disabled and read only

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 disabled prop defines whether the Cascader component is disabled or not. It takes a boolean value. It is true by default. The disabledItemValues prop defines the disabled items from the component. It takes a list of Strings as value. The readOnly attribute defines whether the Cascader component is just a readable component or not. It takes a boolean value. It is true by default. The plainText attribute defines whether the Cascader component appears just as plain text or not. It takes a boolean value. It is true by default.

Syntax:

<Cascader disabled />
<Cascader disabledItemValues={[]}/>
<Cascader readOnly />
<Cascader plainText/>

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 passed the disabled prop, and to the next one we are passing the disabledItemValues prop value as [“Germany”, “Sri Lanka”].

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 Disabled</h4>
      <p>
        <b style={{ marginLeft: 30 }}>Disabled </b>
        <b style={{ marginLeft: 80 }}> Disabled Options</b>
      </p>
      <Cascader
        placeholder="disabled"
        data={countries}
        style={{ marginLeft: 30, marginTop: 10 }}
        disabled
      />

      <Cascader
        placeholder="Germany, Sri Lanka"
        data={countries}
        style={{ marginLeft: 30, marginTop: 10 }}
        disabledItemValues={["Germany", "Sri Lanka"]}
      />
    </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” and applying 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, in the first we passed the readOnly attribute and defaultValue as “Assam”, and to the next one we are passing plainText attribute and defaultValue as “Germany”.

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 readOnly and plaintext</h4>
      <p>
        <b style={{ marginLeft: 30 }}>Read Only </b>
        <b style={{ marginLeft: 80 }}> Plain text</b>
      </p>
      <Cascader
        data={countries}
        style={{ marginLeft: 30, marginTop: 10 }}
        defaultValue="Assam"
        readOnly
      />

      <Cascader
        data={countries}
        style={{ marginLeft: 30, marginTop: 10 }}
        defaultValue="Germany"
        plaintext
      />
    </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/#disabled-and-read-only