Socket
Socket
Sign inDemoInstall

rc-tree-select

Package Overview
Dependencies
19
Maintainers
7
Versions
253
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-tree-select

tree-select ui component for react


Version published
Maintainers
7
Weekly downloads
1,135,569
decreased by-7.61%

Weekly downloads

Package description

What is rc-tree-select?

The rc-tree-select package is a React component for creating tree selection UI elements. It allows users to select one or multiple items from a hierarchical tree structure. It is commonly used in scenarios where a user needs to select categories, nested options, or any other items that are organized in a tree-like structure.

What are rc-tree-select's main functionalities?

Single Selection

This feature allows users to select a single item from the tree. The `treeData` prop is used to pass the hierarchical data to the component, and `treeDefaultExpandAll` expands all tree nodes by default.

import TreeSelect from 'rc-tree-select';

<TreeSelect
  style={{ width: 300 }}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  treeData={treeData}
  placeholder="Please select"
  treeDefaultExpandAll
/>

Multiple Selection

This feature enables multiple selections. The `multiple` prop indicates that multiple items can be selected.

import TreeSelect from 'rc-tree-select';

<TreeSelect
  style={{ width: 300 }}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  multiple
  treeData={treeData}
  placeholder="Please select"
  treeDefaultExpandAll
/>

Searchable Nodes

This feature adds a search input to the component, allowing users to filter tree nodes. The `showSearch` prop enables the search functionality.

import TreeSelect from 'rc-tree-select';

<TreeSelect
  style={{ width: 300 }}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  treeData={treeData}
  showSearch
  placeholder="Please select"
  treeDefaultExpandAll
/>

Asynchronous Data Loading

This feature allows for the loading of tree data asynchronously. The `loadData` prop is a function that is called to load data for a particular node when it is expanded.

import TreeSelect, { TreeNode } from 'rc-tree-select';

<TreeSelect
  loadData={onLoadData}
  treeData={treeData}
  style={{ width: 300 }}
  treeDefaultExpandAll
/>

Other packages similar to rc-tree-select

Readme

Source

rc-tree-select

React TreeSelect Component

NPM version dumi build status Test coverage Dependencies DevDependencies npm download bundle size

Screenshots

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: https://tree-select-react-component.vercel.app/

install

rc-tree-select

API

TreeSelect props

namedescriptiontypedefault
classNameadditional css class of root dom nodeString''
prefixClsprefix classString''
animationdropdown animation name. only support slide-up nowString''
transitionNamedropdown css animation nameString''
choiceTransitionNamecss animation name for selected items at multiple modeString''
dropdownMatchSelectWidthwhether dropdown's with is same with select. Default set min-width same as inputbooltrue
dropdownClassNameadditional className applied to dropdownString-
dropdownStyleadditional style applied to dropdownObject{}
dropdownPopupAlignspecify alignment for dropdown (alignConfig of dom-align)Object-
onDropdownVisibleChangecontrol dropdown visiblefunction() => { return true; }
notFoundContentspecify content to show when no result matches.String'Not Found'
showSearchwhether show search input in single modebooltrue
allowClearwhether allowClearboolfalse
maxTagTextLengthmax tag text length to shownumber-
maxTagCountmax tag count to shownumber-
maxTagPlaceholderplaceholder for omitted valuesReactNode/function(omittedValues)-
multiplewhether multiple select (true when enable treeCheckable)boolfalse
disabledwhether disabled selectboolfalse
searchValuework with onSearch to make search value controlled.string''
defaultValueinitial selected treeNode(s)same as value type-
valuecurrent selected treeNode(s).normal: String/Array. labelInValue: {value:String,label:React.Node}/Array<{value,label}>. treeCheckStrictly(halfChecked default false): {value:String,label:React.Node, halfChecked}/Array<{value,label,halfChecked}>.-
labelInValuewhether to embed label in value, see above value typeBoolfalse
onChangecalled when select treeNode or input value changefunction(value, label(null), extra)-
onSelectcalled when select treeNodefunction(value, node, extra)-
onSearchcalled when input changedfunction-
onTreeExpandcalled when tree node expandfunction(expandedKeys)-
showCheckedStrategyTreeSelect.SHOW_ALL: show all checked treeNodes (Include parent treeNode). TreeSelect.SHOW_PARENT: show checked treeNodes (Just show parent treeNode). Default just show child.enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }TreeSelect.SHOW_CHILD
treeIconshow tree iconboolfalse
treeLineshow tree lineboolfalse
treeDefaultExpandAlldefault expand all treeNodeboolfalse
treeDefaultExpandedKeysdefault expanded treeNode keysArray-
treeExpandedKeysset tree expanded keysArray-
treeExpandActionTree open logic, optional: false | click | doubleClick, same as expandAction of rc-treestring | booleanclick
treeCheckablewhether tree show checkbox (select callback will not fire)boolfalse
treeCheckStrictlycheck node precisely, parent and children nodes are not associatedboolfalse
filterTreeNodewhether filter treeNodes by input value. default filter by treeNode's treeNodeFilterProp prop's valuebool/Function(inputValue:string, treeNode:TreeNode)Function
treeNodeFilterPropwhich prop value of treeNode will be used for filter if filterTreeNode return trueString'value'
treeNodeLabelPropwhich prop value of treeNode will render as content of selectString'title'
treeDatatreeNodes data Array, if set it then you need not to construct children TreeNode. (value should be unique across the whole array)array<{value,label,children, [disabled,selectable]}>[]
treeDataSimpleModeenable simple mode of treeData.(treeData should be like this: [{id:1, pId:0, value:'1', label:"test1",...},...], pId is parent node's id)bool/object{id:'id', pId:'pId', rootPId:null}false
loadDataload data asynchronouslyfunction(node)-
getPopupContainercontainer which popup select menu rendered intofunction(trigger:Node):Nodefunction(){return document.body;}
autoClearSearchValueauto clear search input value when multiple select is selected/deselectedbooleantrue
suffixIconspecify the select arrow iconReactNode | (props: TreeProps) => ReactNode-
clearIconspecify the clear iconReactNode | (props: TreeProps) => ReactNode-
removeIconspecify the remove iconReactNode | (props: TreeProps) => ReactNode-
switcherIconspecify the switcher iconReactNode | (props: TreeProps) => ReactNode-
virtualDisable virtual when falsefalse-

TreeNode props

note: you'd better to use treeData instead of using TreeNode.

namedescriptiontypedefault
disableddisable treeNodeboolfalse
keyit's value must be unique across the tree's all TreeNode, you must set itString-
valuedefault as treeNodeFilterProp (be unique across the tree's all TreeNode)String''
titletree/subTree's titleString/element'---'
isLeafwhether it's leaf nodeboolfalse

note

  1. Optimization tips(when there are large amounts of data, like more than 5000 nodes)
    • Do not Expand all nodes.
    • Recommend not exist many TreeSelect components in a page at the same time.
    • Recommend not use treeCheckable mode, or use treeCheckStrictly.
  2. In treeCheckable mode, It has the same effect when click x(node in Selection box) or uncheck in the treeNode(in dropdown panel), but the essence is not the same. So, even if both of them trigger onChange method, but the parameters (the third parameter) are different. (中文:在treeCheckable模式下,已选择节点上的x删除操作、和相应 treeNode 节点上 checkbox 的 uncheck 操作,最终效果相同,但本质不一样。前者跟弹出的 tree 组件可以“毫无关系”(例如 dropdown 没展开过,tree 也就没渲染好),而后者是 tree 组件上的节点 uncheck 事件。所以、即便两者都会触发onChange方法、但它们的参数(第三个参数)是不同的。)

Test Case

http://localhost:8000/tests/runner.html?coverage

Coverage

http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

License

rc-tree-select is released under the MIT license.

Keywords

FAQs

Last updated on 08 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc