Examples

Every example is live and its source is shown below it. The same examples are available as interactive stories with editable props in the Storybook playground.

• Disabled nodes: how chained selection treats disabled branches
• Styling: restyle the default parts with Tailwind CSS classes
• Custom expand icon: replace the arrow with plus and minus icons
• File tree: replace checkboxes with folder and file icons
• Comment thread: replace the whole node with your own component
• Large tree: a controlled tree with 21,110 nodes
• Controlled usage: keep the selection in state and read the selected IDs

Basic props

This example combines a few behavior props on a tree where Child 1 is disabled:

• defaultExpanded: every node starts expanded
• chainedSelect={false}: each node is selected individually
• expandDisabledNodes={false}: disabled nodes can't be expanded or collapsed

Root 1▲

Child 1▲

Grandchild 1

Grandchild 2

Child 2

Root 2▲

Child 3

Child 4

Show code

BasicPropsExample.tsx

import TreeSelect from '@attebyte/react-tree-select';
import { exampleDataWithDisabled, ExampleNode } from './data';

// defaultExpanded: all nodes start expanded
// chainedSelect={false}: each node is selected individually
// expandDisabledNodes={false}: disabled nodes can't be expanded or collapsed
export default function BasicPropsExample() {
  return (
    <TreeSelect<ExampleNode>
      defaultData={exampleDataWithDisabled}
      uniqueIDProperty='value'
      labelProperty='label'
      childrenProperty='children'
      valueProperty='included'
      disabledProperty='disabled'

      defaultExpanded
      chainedSelect={false}
      expandDisabledNodes={false}

      className='bg-neutral-800 text-white p-6 rounded font-sans'
      aria-label='Basic props example'
    />
  );
}

Because the nodes start expanded, the disabled Child 1 stays expanded. With chainedSelect turned off, the children of a disabled node can still be selected, which is useful when selecting a parent isn't meaningful.