React Tree Multi Select

react-tree-multi-select is a fast, highly customizable and feature-rich component that combines tree-select, multi-select and single-select functionality into a single versatile solution.

See documentation website for documentation and live examples.

Installation

You can install react-tree-multi-select via npm:

``
npm install react-tree-multi-select
`

Usage

Basic usage

`js
import React, {FC} from 'react';
import {SelectionAggregateState, TreeNode, TreeMultiSelect} from 'react-tree-multi-select';

export const ReactTreeMultiSelectApp: FC = () => {

const data: TreeNode[] = [
{
id: '1',
label: 'label1',
children: [
{
id: '1.1',
label: 'child11-label'
},
{
id: '1.2',
label: 'child12-label'
}
]
},
{
id: '2',
label: 'label2',
children: [
{
id: '2.1',
label: 'child21-label'
},
{
id: '2.2',
label: 'child22-label'
}
]
},
{
id: '3',
label: 'label3'
}
];

const handleNodeChange = (node: TreeNode, selectedIds: string[]): void => {
console.log('handleNodeChange node:', node);
console.log('handleNodeChange selectedIds:', selectedIds);
};

const handleNodeToggle = (node: TreeNode, expandedIds: string[]): void => {
console.log('handleNodeToggle node:', node);
console.log('handleNodeToggle expandedIds:', expandedIds);
};

const handleClearAll = (selectedIds: string[], selectionAggregateState: SelectionAggregateState): void => {
console.log('handleClearAll selectedIds:', selectedIds);
console.log('handleClearAll selectionAggregateState:', selectionAggregateState);
};

const handleSelectAllChange = (selectedIds: string[], selectionAggregateState: SelectionAggregateState): void => {
console.log('handleSelectAllChange selectedIds:', selectedIds);
console.log('handleSelectAllChange selectionAggregateState:', selectionAggregateState);
};

return (
data={data}
withSelectAll
onNodeChange={handleNodeChange}
onNodeToggle={handleNodeToggle}
onClearAll={handleClearAll}
onSelectAllChange={handleSelectAllChange}
/>
);
});
``

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you find my work helpful, you can support me by buying me a coffee. Thank you for your support!