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.

⚠️ If you're adding your own id parameter, it's important that it's a string and not a number or other type.

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

const Component = () => {
  const [data, setData] = useState([
    {
      id: "1",
      label: "Item #1",
      open: true,
      children: [{ label: "Item #2" }],
    },
    {
      id: "2",
      label: "Item #3",
    },
  ]);

  const onTreeListChange = (data) => {
    setData(data);
  };

  const onTreeListSelected = (item) => {
    console.log("selected item =", item);
  };

  const onDrop = (draggingNode, dropNode, dropType) => {
    console.log("draggingNode:", draggingNode);
    console.log("dropNode:", dropNode);
    console.log("dropType:", dropType);
  };

  return (
    <ReactTreeList
      data={data}
      draggable={true}
      onDrop={onDrop}
      onChange={onTreeListChange}
      itemDefaults={{ open: false, arrow: "▸" }}
      selectedId="1"
      onSelected={onTreeListSelected}
    />
  );
};

Open this code in Code Sandbox

Simple Style Customisation

There's a limited possibility to adjust the styles (background color, outline color, border radius, etc.) of the focused items using the itemOptions property.

By default, the focus outline and background colors inherit from the element's currentColor, so the component adapts automatically to your text color — including dark mode.

const Component = () => {
  ...

  return (
    <ReactTreeList
      ...
      itemOptions={{
        focusedOutlineColor: "rgba(255, 0, 0, 0.5)",
        focusedOutlineWidth: 1,
        focusedBorderRadius: 50,
        focusedBackgroundColor: "rgba(255, 0, 0, 0.1)",
      }}
    />
  );
}

Storybook - Tree List With Custom Styles

See Advanced Examples

License

React Tree List is licensed under the MIT License.

Authors

Ondřej Bárta · GitHub · website · twitter

Contributors

张威 (zhangwei900808) · GitHub