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>neveropen</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>neveropen</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 neveropen </span> ); }} /> </div> </div> </center> ); } |
Output:
Reference: https://rsuitejs.com/components/check-tree-picker/#custom-options
