React Tree Select     

A simple, highly customizable tree component.

View Full Documentation

Installation

Install using the package manager of your choice.

``
npm i @attebyte/react-tree-select
`
`
yarn add @attebyte/react-tree-select
`

Getting Started

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 (
<>
defaultData={ExampleData}
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,
}
]
}
];
`

Props

Commonly required props for most use cases. To see a full list of available properties, see our full documentation.

| 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

Customization


This library is built with customization in mind and contains minimal default styles using tailwind. The library consists of 4 replacable parts:
- TreeNode - 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
For additional information and examples of customization, please see our full documentation.

---

This is my first open source project and feedback is always appreciated. Twitter