Open In App

React Suite CheckTreePicker Appearance

Improve
Improve
Like Article
Like
Save
Share
Report

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.

React CheckTreePicker Appearance provides 2 types of appearance to CheckTreePicker i.e Default and subtle. The subtle appearance provides a faint appearance to the CheckTreePicker.

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

Project Structure: It will look like the following.

 

Example: In this example, we will learn about Default Appearance.

  • 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';
  
export default function App() {
    // Sample Options
    const data = [
        {
            "label": "Madhya Pradesh",
            "value": 1,
            "children": [
                {
                    "label": "Mhow",
                    "value": 2
                },
                {
                    "label": "Indore",
                    "value": 3,
                    "children": [
                        {
                            "label": "Vijay Nagar",
                            "value": 4
                        },
                        {
                            "label": "Rajiv Gandhi Square",
                            "value": 5
                        },
                        {
                            "label": "MR 10",
                            "value": 6
                        },
                    ]
                },
            ]
        }
    ]
    return (
        <div className="App">
            <h1 style={{ color: 'green' }} >
                GeeksforGeeks</h1>
            <h3>React Suite CheckTreePicker Default Appearance</h3>
            <CheckTreePicker appearance="default" 
                placeholder="GFG_Default_CheckTreePicker" 
                data={data} />
        </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 Subtle Appearance

Javascript




import react from 'react';
import CheckTreePicker from 'rsuite/CheckTreePicker';
import 'rsuite/dist/rsuite.min.css';
  
export default function App() {
    // Sample Options
    const data = [
        {
            "label": "Madhya Pradesh",
            "value": 1,
            "children": [
                {
                    "label": "Mhow",
                    "value": 2
                },
                {
                    "label": "Indore",
                    "value": 3,
                    "children": [
                        {
                            "label": "Vijay Nagar",
                            "value": 4
                        },
                        {
                            "label": "Rajiv Gandhi Square",
                            "value": 5
                        },
                        {
                            "label": "MR 10",
                            "value": 6
                        },
                    ]
                },
            ]
        }
    ]
    return (
        <div className="App">
            <h1 style={{ color: 'green' }} >GeeksforGeeks</h1>
            <h3>React Suite CheckTreePicker Subtle Appearance</h3>
            <CheckTreePicker appearance="subtle" 
                placeholder="GFG_Subtle_CheckTreePicker" 
                data={data} />
        </div>
    );
}


Output:

 

References: https://rsuitejs.com/components/check-tree-picker/#appearance



Last Updated : 15 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads