React Suite CheckTreePicker Custom Options

Last Updated : 28 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 Custom Options. CheckTreePicker is used as multiple selectors for the selection of multiple complex data structures. We can use custom options like custom footer, custom tree node, etc in the CheckTreePicker component.

Syntax:

<CheckTreePicker 
    data={data}
    renderTreeNode={...} 
    renderValue={...}  
    searchBy={...} 
/>

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 CheckTreePicker with custom options.

JavaScript

import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import PlusCircle from "@rsuite/icons/legacy/PlusCircle"
import Tag from "@rsuite/icons/legacy/Tag"

export default function App() {
    const customData = [
        {
            label: "Data Structures",
            value: 1,
            children: [
                {
                    label: "Queue",
                    value: 2,
                    children: [
                        {
                            label: "Priority Queue",
                            value: 3,
                        },
                        {
                            label: "FIFO Queue",
                            value: 4,
                        },
                    ],
                },
                {
                    label: "Linked List",
                    value: 5,
                    children: [
                        {
                            label: "Circular",
                            value: 6,
                        },
                        {
                            label: "Double",
                            value: 7,
                        },
                        {
                            label: "Single",
                            value: 8,
                        },
                    ],
                },
            ],
        },
    ];

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite CheckTreePicker Custom Options</h4>
                <div style={{ marginTop: 20, width: 800 }}>
                    <CheckTreePicker
                        defaultExpandAll
                        data={customData}
                        style={{ width: 280 }}
                        placeholder={
                            <span>
                                <PlusCircle color="gray" /> 
                                    Select Algorithms
                            </span>
                        }
                        renderTreeNode={(nodeData) => {
                            return (
                                <span>
                                    <i className="rs-icon 
                                        rs-icon-map-marker" /> 
                                        {nodeData.label}
                                </span>
                            );
                        }}
                        renderValue={(value, checkedItems) => {
                            return (
                                <span>
                                    <span style={{ color: "#575757" }}>
                                        <Tag color="gray" /> 
                                            Selected Algorithms :
                                    </span>{" "}
                                    {checkedItems.map(
                                    (item) => item.label).join(" , ")}
                                </span>
                            );
                        }}
                    />
                </div>
            </div>
        </center>
    );
}

Output:

Example 2: Below example demonstrate the CheckTreePicker with the custom footer.

JavaScript

import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import Copyright from "@rsuite/icons/legacy/Copyright"
import PlusCircle from "@rsuite/icons/legacy/PlusCircle"
import Tag from "@rsuite/icons/legacy/Tag"

export default function App() {
    const customData = [
        {
            label: "Data Structures",
            value: 1,
            children: [
                {
                    label: "Queue",
                    value: 2,
                    children: [
                        {
                            label: "Priority Queue",
                            value: 3,
                        },
                        {
                            label: "FIFO Queue",
                            value: 4,
                        },
                    ],
                },
                {
                    label: "Linked List",
                    value: 5,
                    children: [
                        {
                            label: "Circular",
                            value: 6,
                        },
                        {
                            label: "Double",
                            value: 7,
                        },
                        {
                            label: "Single",
                            value: 8,
                        },
                    ],
                },
            ],
        },
    ];

    return (
        <center>
            <div>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite CheckTreePicker Custom Options</h4>
                <div style={{ marginTop: 20, width: 800 }}>
                    <CheckTreePicker
                        defaultExpandAll
                        data={customData}
                        style={{ width: 280 }}
                        placeholder={
                            <span>
                                <PlusCircle color="gray" /> 
                                    Select Algorithms
                            </span>
                        }
                        renderTreeNode={(nodeData) => {
                            return (
                                <span>
                                    <i className="rs-icon 
                                        rs-icon-map-marker" /> 
                                        {nodeData.label}
                                </span>
                            );
                        }}
                        renderValue={(value, checkedItems) => {
                            return (
                                <span>
                                    <span style={{ color: "#575757" }}>
                                        <Tag color="gray" /> 
                                            Selected Algorithms :
                                    </span>{" "}
                                    {checkedItems.map(
                                    (item) => item.label).join(" , ")}
                                </span>
                            );
                        }}
                        renderExtraFooter={() => {
                            return (
                                <span style={{ padding: 6, 
                                    alignItems: 'center', 
                                    textAlign: 'center' }}>
                                    <Copyright color="gray" /> 
                                        by GeeksforGeeks
                                </span>
                            );
                        }}
                    />
                </div>
            </div>
        </center>
    );
}