README

React Tree List

A draggable & sortable tree list UI component for React.

Demo · See Features · Request Feature

Usage

Installation with NPM

npm install @bartaxyz/react-tree-list

This package additionaly requires you having react and react-dom dependencies.

Importing

You can import the component directly as ReactTreeList

import { ReactTreeList } from '@bartaxyz/react-tree-list';

Typescript

For Typescript the imports additionaly include types like ReactTreeListProps which is a type of properties for ReactTreeList component.

import { ReactTreeList, ReactTreeListProps } from '@bartaxyz/react-tree-list';

Simple Example

This is a simple implementation with some items (one nested item) and defaults for each of the items.

import React, { useState } from 'react';
import { ReactTreeList } from '@bartaxyz/react-tree-list';


const Component = () => {
  const [data, setData] = useState([
    {
      label: 'Item #1',
      open: true,
      children: [{ label: 'Item #2' }],
    },
    {
      label: 'Item #3',
    },
  ]);
  
  const onTreeListChange = (data) => {
    setData(data);
  }
  
  return (
    <ReactTreeList
      data={data}
      onChange={onTreeListChange}
      itemDefaults={{ open: false, arrow: "▸" }}
    />
  );
}

@bartaxyz/react-tree-list

Usage no npm install needed!