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

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 (
    <TreeMultiSelect
      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!