# react-do-tree-select > A tree select [React] component. Latest version **1.3.9** (published 2020-03-16) · MIT license · 0 weekly downloads ## Install ```sh npm install react-do-tree-select pnpm add react-do-tree-select yarn add react-do-tree-select bun add react-do-tree-select ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.9 | | Published | 2020-03-16 | | First published | 2018-09-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 87.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 12 | | Author | hjyue1@163.com | | Maintainers | hjyue1 | | Keywords | react, reactjs, react-component, tree-select, tree, select, virtual-tree, virtual-tree-select | ## Links - npm: https://www.npmjs.com/package/react-do-tree-select - Repository: https://github.com/hjyue1/react-do-tree-select - Homepage: https://github.com/hjyue1/react-do-tree-select#readme - Issues: https://github.com/hjyue1/react-do-tree-select/issues - npm.io page: https://npm.io/package/react-do-tree-select ## Dependencies (3) - [sinon](https://npm.io/package/sinon.md) ^7.0.0 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.2 - [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.20.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.3.9 (latest) — 2020-03-16 - 1.3.8 — 2020-02-10 - 1.3.7 — 2019-12-13 - 1.3.6 — 2019-03-04 - 1.3.5 — 2019-02-21 - 1.3.4 — 2018-10-30 - 1.3.3 — 2018-10-30 - 1.3.2 — 2018-10-30 - 1.3.1 — 2018-10-30 - 1.3.0 — 2018-10-17 - 1.2.8 — 2018-10-17 - 1.2.7 — 2018-10-09 - 1.2.6 — 2018-10-08 - 1.2.5 — 2018-09-30 - 1.2.4 — 2018-09-29 - … 22 more at https://npm.io/package/react-do-tree-select/versions ## README # react-do-tree-select A tree select [React] component. [![NPM version](https://img.shields.io/npm/v/react-do-tree-select.svg?style=flat)](https://www.npmjs.com/package/react-do-tree-select) ![NPM license](https://img.shields.io/npm/l/react-do-tree-select.svg?style=flat) [![NPM total downloads](https://img.shields.io/npm/dt/react-do-tree-select.svg?style=flat)](https://www.npmjs.com/package/react-do-tree-select?minimal=true) [简体中文](./README-zh_CN.md) ## Features - Support a large amount of data (1000,000 pieces of data were tested for stability) - Support half-selection (even if the child nodes are all selected, the check of parent level will not be affected) ## Demo - [online](https://hjyue1.github.io/react-do-tree-select/demo/modifyParams/) ## Install ```bash npm install react-do-tree-select --save # or yarn install react-do-tree-select ``` react-do-tree-select depends on React ## Examples Here's simple example to get you started. react-do-tree-select ```js import React from 'react'; import TreeSelect from 'react-do-tree-select'; import Data from './Data'; class MyComponent extends React.Component { constructor(props) { super(props); this.state = { treeData: [], selectVal: '', showlevel: 0, } this.onSelect = this.onSelect.bind(this); this.onExpand = this.onExpand.bind(this); this.onChecked = this.onChecked.bind(this); this.customTitleRender = this.customTitleRender.bind(this); } componentDidMount() { const treeData = Data; this.setState({treeData}); } customTitleRender(item) { return item.title } onSelect(val, e) { console.log(val); } onExpand(val, e) { console.log(val); } onChecked(val, e) { console.log(val); } render() { return ( const { treeData, showlevel } = this.state; const checkbox = { enable: true, parentChain: true, // child Affects parent nodes; childrenChain: true, // parent Affects child nodes; halfChain: true, // The selection of child nodes affects the semi-selection of parent nodes. initCheckedList: [] // Initialize check multiple lists } return (
); ); } } ``` ./Data.js ```js export default [ { title: '广东省', value: '1', children: [ { title: '广州市', value: '1-1', children: [ { title: '越秀区', value: '1-1-1', },{ title: '白云区', value: '1-1-2', } ] },{ title: '珠海市', value: '1-2', disabled: true, },{ title: '深圳市', value: '1-3', } ] },{ title: '广西省', value: '2', children: [ { title: '南宁市', value: '2-1', },{ title: '桂林市', value: '2-2', },{ title: '玉林市', value: '2-3', } ] } ] ``` ## API | property | description | type | default | required | | -------- | ----------- | ---- | ------- | -------- | | treeData | source data [config](#treeData) | array | - | true | | showlevel | Hierarchy of expansion | number | 0 | | checkbox | Check box config [config](#checkbox) | object | - | | wrapperClassName | Extended class name | string | - | | selectVal | Selected items | string | - | | style | Custom style | object | {width: 320, height: 800} | | onSelect | Click the event callback function | function( item, event ) | - | | onExpand | Icon Click the event callback function | function( item, event ) | - | | onChecked | Check the callback function for the event | function( items, event ) | - | | customIconRender | The custom icon is extended after the entry | function(item) : DOM | - | | customTitleRender | Displays the title of the entry | function(item) : DOM | - | ### treeData | property | description | type | default | required | | -------- | ----------- | ---- | ------- | -------- | | title | Item title | string | - | | value | The unique identity of the item | string | - | | disabled | Whether the item is disabled | bool | false | | children | Item children | array | - | ### checkbox | property | description | type | default | required | | -------- | ----------- | ---- | ------- | -------- | | enable | Switch the check box | bool | false | | parentChain | child Affects parent nodes | bool | true | | childrenChain | parent Affects child nodes | bool | true | | halfChain | The selection of child nodes affects the semi-selection of parent nodes | bool | true | | initCheckedList | Initialize check multiple lists | array | - | ## License *react-do-tree-select* is available under the MIT License. [React]: https://github.com/facebook/react --- _Source: https://npm.io/package/react-do-tree-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._