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' }} >                 neveropen</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' }} >neveropen</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, neveropen 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!
