A tree select component for React
npm install @attebyte/react-tree-select```
npm i @attebyte/react-tree-select``
yarn add @attebyte/react-tree-select
Simply pass your tree shaped data to TreeSelect along with the required properties.
`
import TreeSelect from '@attebyte/react-tree-select';
import '@attebyte/react-tree-select/dist/style.css';
function App() {
return (
<>
labelProperty={'label'}
valueProperty={'included'}
childrenProperty={'children'}
uniqueIDProperty={'value'}
/>
>
)
}
export default App
`
``
const ExampleData: ExampleNode[] = [
{
label: 'Root 1',
value: 1,
children: [
{
label: 'Child 1',
value: 2,
children: [
{
label: 'Grandchild 1',
value: 3,
},
{
label: 'Grandchild 2',
value: 4,
}
]
},
{
label: 'Child 2',
value: 5,
}
]
},
{
label: 'Root 2',
value: 6,
children: [
{
label: 'Child 3',
value: 7,
},
{
label: 'Child 4',
value: 8,
}
]
}
];

| Property | Type | Required? | Description |
| ----------- | ----------- | ----------- | ----------- |
| data | T[] | yes* | The data to be rendered, if controlled |defaultData
| | T[] | yes* | The data to be rendered, if uncontrolled |uniqueIDProperty
| | keyof T | yes | The property of your tree node that uniquely identifies the node |labelProperty
| | keyof T | yes | The property of your node to display |childrenProperty
| | keyof T | yes | The property of your node that holds the node's children |valueProperty
| | keyof T | yes* | Required if you intend to use the tree to select nodes. If using for display purposes only, not required |onChange
| | (data: T[]) => void | yes* | Required if you intend to use the the tree to select nodes. Called every time a node selection is changed with the updated tree
- The container for an individual node
- NodeLabel - The label displyed within each node
- NodeCheck - The checkbox used to select a node or indicate descendent's selections
- ExpandIcon` - Icon to indicate if a node has children or is collapsed / expanded---
This is my first open source project and feedback is always appreciated. Twitter