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