Installations

npm install rc-tree-select

Score

85.2

Supply Chain

94.3

Quality

97

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

14

Total

447

Closed

288

Merged

145

Issues

Open

80

Total

150

Closed

70

Releases

96

v5.24.5

Published on 21 Nov 2024

v5.24.4

Published on 11 Nov 2024

v5.24.3

Published on 24 Oct 2024

v5.24.2

Published on 16 Oct 2024

v5.24.1

Published on 16 Oct 2024

v5.24.0

Published on 15 Oct 2024

View all 96 releases

Contributors

58

View all 58 contributors

Developer

react-component

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

22.5.1

NPM Version

10.8.2 Statistics

295 Stars

625 Commits

194 Forks

11 Watching

28 Branches

58 Contributors

Updated on 21 Nov 2024

Bundle Size

164.79 kB

Minified

54.79 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (62.45%)

JavaScript (37.42%)

Less (0.13%)

Total Downloads

Cumulative downloads

Total Downloads

219,940,586

Last day

-4.8%

285,409

Compared to previous day

Last week

3.8%

1,509,809

Compared to previous week

Last month

10.9%

6,200,234

Compared to previous month

Last year

21.1%

63,850,267

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

5

@babel/runtime classnames rc-select rc-tree rc-util

Peer Dependencies

2

react react-dom

Dev Dependencies

31

Versions

rc-tree-select

React TreeSelect Component

Screenshots

Development

npm install
npm start

Example

http://localhost:8000/examples/

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

install

API

TreeSelect props

name	description	type	default
className	additional css class of root dom node	String	''
prefixCls	prefix class	String	''
animation	dropdown animation name. only support slide-up now	String	''
transitionName	dropdown css animation name	String	''
choiceTransitionName	css animation name for selected items at multiple mode	String	''
dropdownMatchSelectWidth	whether dropdown's with is same with select. Default set `min-width` same as input	bool	true
dropdownClassName	additional className applied to dropdown	String	-
dropdownStyle	additional style applied to dropdown	Object	{}
onDropdownVisibleChange	control dropdown visible	function	`() => { return true; }`
notFoundContent	specify content to show when no result matches.	String	'Not Found'
showSearch	whether show search input in single mode	bool	true
allowClear	whether allowClear	bool	false
maxTagTextLength	max tag text length to show	number	-
maxTagCount	max tag count to show	number	-
maxTagPlaceholder	placeholder for omitted values	ReactNode/function(omittedValues)	-
multiple	whether multiple select (true when enable treeCheckable)	bool	false
disabled	whether disabled select	bool	false
searchValue	work with `onSearch` to make search value controlled.	string	''
defaultValue	initial selected treeNode(s)	same as value type	-
value	current 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}>.	-
labelInValue	whether to embed label in value, see above value type	Bool	false
onChange	called when select treeNode or input value change	function(value, label(null), extra)	-
onSelect	called when select treeNode	function(value, node, extra)	-
onSearch	called when input changed	function	-
onTreeExpand	called when tree node expand	function(expandedKeys)	-
onPopupScroll	called when popup scroll	function(event)	-
showCheckedStrategy	`TreeSelect.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
treeIcon	show tree icon	bool	false
treeLine	show tree line	bool	false
treeDefaultExpandAll	default expand all treeNode	bool	false
treeDefaultExpandedKeys	default expanded treeNode keys	Array	-
treeExpandedKeys	set tree expanded keys	Array	-
treeExpandAction	Tree open logic, optional: false \| `click` \| `doubleClick`, same as `expandAction` of `rc-tree`	string \| boolean	`click`
treeCheckable	whether tree show checkbox (select callback will not fire)	bool	false
treeCheckStrictly	check node precisely, parent and children nodes are not associated	bool	false
filterTreeNode	whether filter treeNodes by input value. default filter by treeNode's treeNodeFilterProp prop's value	bool/Function(inputValue:string, treeNode:TreeNode)	Function
treeNodeFilterProp	which prop value of treeNode will be used for filter if filterTreeNode return true	String	'value'
treeNodeLabelProp	which prop value of treeNode will render as content of select	String	'title'
treeData	treeNodes 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]}>	[]
treeDataSimpleMode	enable 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
treeTitleRender	Custom render nodes	(nodeData: OptionType) => ReactNode
loadData	load data asynchronously	function(node)	-
getPopupContainer	container which popup select menu rendered into	function(trigger:Node):Node	function(){return document.body;}
autoClearSearchValue	auto clear search input value when multiple select is selected/deselected	boolean	true
suffixIcon	specify the select arrow icon	ReactNode \| (props: TreeProps) => ReactNode	-
clearIcon	specify the clear icon	ReactNode \| (props: TreeProps) => ReactNode	-
removeIcon	specify the remove icon	ReactNode \| (props: TreeProps) => ReactNode	-
switcherIcon	specify the switcher icon	ReactNode \| (props: TreeProps) => ReactNode	-
virtual	Disable virtual when `false`	false	-

TreeNode props

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

name	description	type	default
disabled	disable treeNode	bool	false
key	it's value must be unique across the tree's all TreeNode, you must set it	String	-
value	default as treeNodeFilterProp (be unique across the tree's all TreeNode)	String	''
title	tree/subTree's title	String/element	'---'
isLeaf	whether it's leaf node	bool	false

note

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.
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.

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

8

SAST

Determines if the project uses static code analysis.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

5.1

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to rc-tree-select

Other packages similar to rc-tree-select

rc-tree-select

Installations

Score

Pull Requests

14

447

288

145

Issues

80

150

70

Releases

Contributors

Developer

Developer Guide

CommonJS

Yes

22.5.1

10.8.2

Statistics

Bundle Size

164.79 kB

54.79 kB

Languages

Total Downloads

219,940,586

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

rc-tree-select

Screenshots

Development

Example

install

API

TreeSelect props

TreeNode props

note

Test Case

Coverage

License

10

10

10

10

10

8

2

0

0

0

0

0

0

5.1

/10