React Suite CheckTreePicker Disabled and read only

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products.CheckTreePicker is supported in multiple selectors for multiple selections of complex data structures.

The disabled option is used to make some options/entire components in the CheckTreePicker, nonselectable or uncheckable. We just need to mention indexes of the options to make them disabled or uncheckable.

The readonly option makes the default value as selected. The user cannot change it. It is only for reading purposes.

Syntax:

<CheckTreePicker data={data} 
    uncheckableItemValues={[indexes of values to make uncheckable]} />
<CheckTreePicker readOnly data={data} 
    defaultValue={[Any default value]} />
<CheckTreePicker data={data} 
    disabledItemValues={[indexes of values to make them disable}/>
<CheckTreePicker disabled data={data} 
    defaultValue={[Index of default value]}  />

Parameters

• data: These are the options in the form of JSON
• Indexes: These are the values of the options. When we create options, then we define a member value for each object. 

Creating React Application And Installing Module:

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

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite
npm install @thumbtack/thumbprint-react

Project Structure: It will look like the following.

Example 1: In this example, we will learn about disabling entire components and disabling particular options also.

• App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code

Javascript

import React from 'react';
import CheckTreePicker from 'rsuite/CheckTreePicker';
import 'rsuite/dist/rsuite.min.css';
import { Label } from '@thumbtack/thumbprint-react';
export default function App() {
    // Sample Options
    const data = [
        {
            "label": "GeeksforGeeks",
            "value": 1,
            "children": [
                {
                    "label": "Machine Learning",
                    "value": 2
                },
                {
                    "label": "Data Structures",
                    "value": 3,
                    "children": [
                        {
                            "label": "Java",
                            "value": 4
                        },
                        {
                            "label": "C++",
                            "value": 5
                        },
                        {
                            "label": "Python",
                            "value": 6
                        },
                        {
                            "label": "C#",
                            "value": 7
                        },

                    ]
                }
            ]
        },
        {
            "label": "StackOverFlow",
            "value": 8,
            "children": [
                {
                    "label": "Databases",
                    "value": 9
                },
                {
                    "label": "Operating System",
                    "value": 10,
                    "children": [
                        {
                            "label": "linux",
                            "value": 11
                        },
                        {
                            "label": "Windows",
                            "value": 12
                        }
                    ]
                }
            ]
        },
        {
            "label": "Tutorial Point",
            "value": 13,
            "children": [
                {
                    "label": "Engineering Mathematics",
                    "value": 14
                },
                {
                    "label": "Theory of Computation",
                    "value": 15
                }
            ]
        }


    ]

    return (
        <div className="App">
            <h1 style={{ color: 'green' }} >
                GeeksforGeeks</h1>
            <h3>React Suite CheckTreePicker Disabled
                and ReadOnly</h3>
            <Label>Disabled: </Label>
            <CheckTreePicker disabled data={data}
                defaultValue={[2]}
                style={{ width: '50%' }} />
            <br />
            <hr />
            <Label>Disabled option: </Label>
            <CheckTreePicker
                defaultExpandAll
                data={data}
                disabledItemValues={[1, 3, 13]}
                style={{ width: '50%' }}
            />
            <br />
            <hr />

        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Example 2: In this example, we will learn about Uncheckable and readOnly

Javascript

import React from 'react';
import CheckTreePicker from 'rsuite/CheckTreePicker';
import 'rsuite/dist/rsuite.min.css';
import { Label } from '@thumbtack/thumbprint-react';
export default function App() {
    // Sample Options
    const data = [
        {
            "label": "GeeksforGeeks",
            "value": 1,
            "children": [
                {
                    "label": "Machine Learning",
                    "value": 2
                },
                {
                    "label": "Data Structures",
                    "value": 3,
                    "children": [
                        {
                            "label": "Java",
                            "value": 4
                        },
                        {
                            "label": "C++",
                            "value": 5
                        },
                        {
                            "label": "Python",
                            "value": 6
                        },
                        {
                            "label": "C#",
                            "value": 7
                        },

                    ]
                }
            ]
        },
        {
            "label": "StackOverFlow",
            "value": 8,
            "children": [
                {
                    "label": "Databases",
                    "value": 9
                },
                {
                    "label": "Operating System",
                    "value": 10,
                    "children": [
                        {
                            "label": "linux",
                            "value": 11
                        },
                        {
                            "label": "Windows",
                            "value": 12
                        }
                    ]
                }
            ]
        },
        {
            "label": "Tutorial Point",
            "value": 13,
            "children": [
                {
                    "label": "Engineering Mathematics",
                    "value": 14
                },
                {
                    "label": "Theory of Computation",
                    "value": 15
                }
            ]
        }


    ]

    return (
        <div className="App">
            <h1 style={{ color: 'green' }} >
                GeeksforGeeks</h1>
            <h3>React Suite CheckTreePicker
                Disabled and ReadOnly</h3>
            <Label>Uncheckable: </Label>
            <CheckTreePicker
                defaultExpandAll
                data={data}
                uncheckableItemValues={[1, 5, 12]}
                style={{ width: '50%' }}
            />

            <hr />
            <Label>Read only: </Label>
            <CheckTreePicker readOnly data={data}
                defaultValue={[1]} style={{ width: '50%' }} />
            <hr />
        </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/check-tree-picker/#disabled-and-read-only