React Suite CheckTreePicker Cascade

React Suite is a front-end library for the middle platform and back-end products. React Suite CheckTreePicker component is used as multiple selectors for multiple selections of complex data structures.

The cascade attribute is a boolean value that can set whether or not CheckTreePicker can consider the cascade relationship of the parent and their children when selecting. The default value is true.

Syntax:

<CheckTreePicker cascade={}/>

Prerequisite:

• Introduction and Installation reactJS
• React Suite CheckTreePicker Component
• React hook useRef
• React hook useState

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

Now to the two CheckTreePicker components, we are passing the countries list to the data prop. And to the second CheckTreePicker Component, we are passing the cascade prop as false.

App.js

import { CheckTreePicker } 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 CheckTreePicker Cascade</h4>
      <div>
        <p></p>
        <CheckTreePicker
          data={countries}
          placeholder="default"
        ></CheckTreePicker>
        <CheckTreePicker
          data={countries}
          cascade={false}
          placeholder="Cascade = false"
        ></CheckTreePicker>
      </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 adding data prop to the CheckTreePicker component as countries, which is a list of countries’ names. We are adding the picker component using the useRef hook, and named it as checkPicker.

We are adding a button with a label as cascadeBool, we are creating a state cascadeBool using the useState react hook, which is initialized as false.

to the CheckTreePicker added in the previous code, we are passing cascadeBool to the cascade prop. We have also passed “India” as the default value to the component.

To the button above we have added an onClick function named handleClick that sets the value of cascadeBool and also keeps the CheckTreePicker open.

App.js

import { useState, useRef } from "react";
import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
function App() {
  const [cascadeBool, setCascadeBool] = useState(false);
  const checkPicker = useRef();

  const handleClick = () => {
    setCascadeBool(!cascadeBool);
    checkPicker.current.open();
  };
  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 CheckTreePicker Cascade</h4>
      <div>
        <p>
          <b>Cascade</b> set as
          <button
            onClick={handleClick}
            style={{
              marginLeft: 10,
              fontWeight: 900,
              textTransform: "capitalize",
              boxShadow: "black -1px 2px 5px 0px",
              marginBottom: 10,
              width: 80,
            }}
          >
            {"" + cascadeBool}
          </button>
        </p>
        <CheckTreePicker
          data={countries}
          cascade={cascadeBool}
          ref={checkPicker}
          defaultValue={["India"]}
        />
      </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/check-tree-picker/#cascade