Ant Design Library has this component pre-built, and it is very easy to integrate as well. TreeSelect Component is used for the Tree selection control. It is similar to the Select component but here the values are provided in a tree-like structure. We can use the following approach in ReactJS to use the Ant Design TreeSelect Component.
TreeSelect Props:
- allowClear: It is used to indicate whether to allow clear or not.
- autoClearSearchValue: It is used to auto clear the search input value.
- bordered; It is used to indicate whether it has border style or not.
- defaultValue: It is used to set the initially selected treeNodes.
- disabled: It is used to indicate whether it is Disabled or not.
- dropdownClassName: It is used to pass the class name of the dropdown menu.
- dropdownMatchSelectWidth: It is used to determine whether the dropdown menu and select input are the same widths or not.
- dropdownRender: It is used to customize dropdown content.
- dropdownStyle: It is used to set the style of the dropdown menu.
- filterTreeNode: It is used to indicate whether to filter treeNodes by input value.
- getPopupContainer: It is used to set the container of the dropdown menu.
- labelInValue: It is used to indicate whether to embed label in value.
- listHeight: It is used to define the config popup height.
- loadData: It is used to load data asynchronously.
- maxTagCount: It is used to define the max tag count to show.
- maxTagPlaceholder: It is used to define the placeholder for not showing tags.
- multiple: It is used to support multiple selections if treeCheckable is enabled.
- placeholder: It is used to define the placeholder of the select input.
- searchValue: It is used to make search value controlled and it works with onSearch.
- showArrow: It is used to indicate whether to show the suffixIcon.
- showCheckedStrategy: It is used to show the selected item in the box when treeCheckable is set to true.
- showSearch: It is used to denote whether to support search or not.
- size: It is used to set the size of the select input.
- suffixIcon: It is used for the custom suffix icon.
- switcherIcon: It is used to customize collapse.
- treeCheckable: It is used to indicate whether to show a checkbox on the treeNodes or not.
- treeCheckStrictly: It is used to indicate whether to check nodes precisely or not.
- treeData: It is used to denote the data of the treeNodes.
- treeDataSimpleMode: It is used to enable the simple mode of treeData.
- treeDefaultExpandAll: It is used to indicate whether to expand all treeNodes by default or not.
- treeDefaultExpandedKeys: It is used to denote the default expanded treeNode.
- treeExpandedKeys: It is used to set expanded keys.
- treeIcon: It is used to show the icon before a TreeNode’s title.
- treeNodeFilterProp: It is used to define the filter which will be used for filtering if filterTreeNode returns true.
- treeNodeLabelProp: It is used to define props that will render as the content of select.
- value: It is used to set the currently selected treeNodes.
- virtual: It is used to disable virtual scroll when set it is set to false.
- onChange: It is a callback function that is triggered when selected treeNodes or input value change.
- onDropdownVisibleChange: It is a callback function that is triggered when the dropdown opens.
- onSearch: It is a callback function that is triggered when the search input changes.
- onSelect: It is a callback function that is triggered when you select a treeNode.
- onTreeExpand: It is a callback function that is triggered when treeNode expanded.
Tree Methods:
- blur(): This method is used to remove the focus.
- focus(): This method is used to get the focus.
TreeNode Props:
- checkable: It is used to display the Checkbox for TreeNode if Tree is checkable.
- disableCheckbox: It is used to disable the checkbox of the treeNode.
- disabled: It is used to indicate whether it is disabled or not.
- isLeaf: It is used to indicate whether it is a leaf node or not.
- key: It is used for the unique identification of elements.
- selectable: It is used to indicate whether it can be selected or not.
- title: It is used to denote the content showed on the treeNodes.
- value: It is used to define the value which will be treated as treeNodeFilterProp by default.
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 antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React, { useState } from 'react';
import { TreeSelect } from 'antd';
import "antd/dist/antd.css";
const { TreeNode } = TreeSelect; export default function App() {
// States to manage current value
const [value, setValue] = useState(undefined);
return (
<div style={{
display: 'block', width: 700, padding: 30
}}>
<h4>ReactJS Ant-Design TreeSelect Component</h4>
<>
<TreeSelect
placeholder="Select from the Tree"
allowClear
showSearch
value={value}
onChange={() => {
setValue(value);
}}
>
<TreeNode value="Parent" title="Parent">
<TreeNode value="ChildLeaf1" title="ChildLeaf1" />
<TreeNode value="ChildLeaf2" title="ChildLeaf2" />
<TreeNode value="ChildLeaf3" title="ChildLeaf3" />
<TreeNode value="ChildLeaf4" title="ChildLeaf4" />
<TreeNode value="ChildLeaf5" title="ChildLeaf5" />
</TreeNode>
</TreeSelect>
</>
</div>
);
} |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/tree-select/