React Suite CheckTreePicker Appearance

0 0 2 minutes read

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' }} > 
                zambiatek</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' }} >zambiatek</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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!