React Suite CheckTreePicker Async

Last Updated : 19 Jul, 2022

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we'll learn about React suite CheckTreePicker Async. CheckTreePicker is used as multiple selectors for the selection of multiple complex data structures. In async CheckTreePicker, the data node is loaded asynchronously with the help of the getChildren prop.

CheckTreePicker Props:

appearance: It is used for the component appearance.
block: It is used to block an entire row.
cascade: It is used to indicate whether cascade select or not.
childrenKey: It is used to denote the Tree data structure Children property name.
cleanable: It is used to indicate whether the option can be emptied or not.
container: It is used to set the rendering container.
countable: It is used to indicate whether display counts of checkItems or not.
data: It is used to denote the selectable data.
defaultExpandAll: It is used to expand all nodes by default.
defaultExpandItemValues: It is used to set the value of the default expanded node.
defaultValue: It is used to denote the default value.
disabled: It is used to indicate whether the component is disabled or not.
disabledItemValues: It is used to disable optional.
expandItemValues: It is used to set the value of the expanded node (controlled).
height: It is used to denote the menu height.
labelKey: It is used to set the options to display the ‘key’ in ‘data’.
menuClassName: It is used to denote a CSS class to apply to the Menu DOM node.
menuStyle: It is used to denote a style to apply to the Menu DOM node.
onChange: It is a callback function that is triggered when value changes.
onClean: It is a callback function that is triggered when value clean.
onClose: It is a callback function that is triggered on a close event.
onExpand: It is a callback function that is triggered when the tree node is displayed.
onEnter: It is a callback function that is triggered before the overlay transitions in.
onEntered: It is a callback function that is triggered after the overlay finishes transitioning in.
onEntering: It is a callback function that is triggered as the overlay begins to transition in.
onExit: It is a callback function that is triggered right before the overlay transitions out.
onExited: It is a callback function that is triggered after the overlay finishes transitioning out.
onExiting: It is a callback function that is triggered as the overlay begins to transition out.
onOpen: It is a callback function that is triggered on open of the component.
onSearch: It is a callback function for the search.
onSelect: It is a callback function that is triggered on the selection of an option.
placeholder: It is used to denote the placeholder.
placement: It is used for the placement of component.
preventOverflow: It is used to prevent floating element overflow.
renderExtraFooter: It is used for the custom render extra footer.
renderMenu: It is used for customizing the Rendering Menu list.
renderTreeIcon: It is used to denote the custom render icon.
renderTreeNode: It is used to denote the custom render tree node.
renderValue: It is used for the custom Render selected options.
searchBy: It is used for the custom search rules.
searchable: It is used to indicate whether you can search for options or not.
size: It is used to denote the picker size.
toggleComponentClass: It can be used for the custom element for this component.
uncheckableItemValues: It is used to set the option value for the checkbox not to be rendered.
value: It is used to denote the value (Controlled).
valueKey: It is used to set the option value ‘key’ in ‘data’.
virtualized: It is used to indicate whether to use Virtualized List or not.
caretAs: It is used to add a custom caret icon.

Syntax:

<CheckTreePicker onOpen={() => {...}} 
    getChildren={(activeNode) => ... }  />

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: Below example demonstrate the basic implementation of async CheckTreePicker.

JavaScript

import { useState } from "react";
import { CheckTreePicker } from "rsuite";
import SpinnerIcon from "@rsuite/icons/legacy/Spinner";
import "rsuite/dist/rsuite.min.css";

export default function App() {
    const [value, setValue] = useState([]);
    const [data, setData] = useState([]);

    const customData = [
        {
            label: "Algorithms",
            value: 1,
            children: [
                {
                    label: "Searching",
                    value: 2,
                    children: [
                        {
                            label: "Binary Search",
                            value: 3,
                        },
                        {
                            label: "Linear Search",
                            value: 4,
                        },
                    ],
                },
                {
                    label: "Sorting",
                    value: 5,
                    children: [
                        {
                            label: "Selection Sort",
                            value: 6,
                        },
                        {
                            label: "Bubble Sort",
                            value: 7,
                        },
                        {
                            label: "Merge Sort",
                            value: 8,
                        },
                    ],
                },
            ],
        },
    ];

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite CheckTreePicker Async</h4>
                <div style={{ marginTop: 20, width: 800 }}>
                    <CheckTreePicker
                        data={customData}
                        value={value}
                        style={{ width: 280 }}
                        onChange={(value) => setValue(value)}
                        onOpen={() => {
                            if (data.length === 0) {
                                setTimeout(() => {
                                    setData([
                                        {
                                            label: "Parent Node",
                                            value: "0",
                                            children: [],
                                        },
                                    ]);
                                }, 2000);
                            }
                        }}
                        renderMenu={(menuTree) => {
                            if (data.length === 0) {
                                return (
                                    <p style={
                        { padding: 6, textAlign: "center" }}>
                                        <SpinnerIcon size="md" spin /> 
                                            Loading...
                                    </p>

                                );
                            }
                            return menuTree;
                        }}
                        getChildren={(activeNode) =>
                            new Promise((resolve) => {
                                setTimeout(() => {
                                    resolve([
                                        {
                                            label: "Child Node",
                                            value: `${activeNode.refKey}-0`,
                                            children: [],
                                        },
                                        {
                                            label: "Child Node",
                                            value: `${activeNode.refKey}-1`,
                                            children: [],
                                        },
                                    ]);
                                }, 2000);
                            })
                        }
                    />
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrate the async CheckTreePicker along with disabled options.

JavaScript

import { useState } from "react";
import { CheckTreePicker } from "rsuite";
import SpinnerIcon from "@rsuite/icons/legacy/Spinner";
import "rsuite/dist/rsuite.min.css";

export default function App() {
    const [value, setValue] = useState([]);
    const [data, setData] = useState([]);

    const customData = [
        {
            label: "Algorithms",
            value: 1,
            children: [
                {
                    label: "Searching",
                    value: 2,
                    children: [
                        {
                            label: "Binary Search",
                            value: 3,
                        },
                        {
                            label: "Linear Search",
                            value: 4,
                        },
                    ],
                },
                {
                    label: "Sorting",
                    value: 5,
                    children: [
                        {
                            label: "Selection Sort",
                            value: 6,
                        },
                        {
                            label: "Bubble Sort",
                            value: 7,
                        },
                        {
                            label: "Merge Sort",
                            value: 8,
                        },
                    ],
                },
            ],
        },
    ];

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite CheckTreePicker Async</h4>
                <div style={{ marginTop: 20, width: 800 }}>
                    <CheckTreePicker
                        data={customData}
                        value={value}
                        style={{ width: 280 }}
                        onChange={(value) => setValue(value)}
                        disabledItemValues={[4, 6, 7]}
                        onOpen={() => {
                            if (data.length === 0) {
                                setTimeout(() => {
                                    setData([
                                        {
                                            label: "Parent Node",
                                            value: "1",
                                            children: [],
                                        },
                                    ]);
                                }, 1000);
                            }
                        }}
                        renderMenu={(menuTree) => {
                            if (data.length === 0) {
                                return (
                                    <p style={
                         { padding: 6, textAlign: "center" }}>
                                        <SpinnerIcon size="md" spin /> 
                                            Loading...
                                    </p>

                                );
                            }
                            return menuTree;
                        }}
                        getChildren={(activeNode) =>
                            new Promise((resolve) => {
                                setTimeout(() => {
                                    resolve([
                                        {
                                            label: "Child Node",
                                            value: `${activeNode.refKey}-0`,
                                            children: [],
                                        },
                                        {
                                            label: "Child Node",
                                            value: `${activeNode.refKey}-1`,
                                            children: [],
                                        },
                                    ]);
                                }, 1000);
                            })
                        }
                    />
                </div>
            </div>
        </center>
    );
}