@attebyte/react-tree-select NPM

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 (
    <>
      <TreeSelect
        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

react tree select component

class-variance-authority clsx tailwind-merge

1.0.0

2 years ago