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("choosed item =", item);
  };

  const onDrop = (dragingNode, dragNode, drogType) => {
    console.log("dragingNode:", dragingNode);
    console.log("dragNode:", dragNode);
    console.log("drogType:", drogType);
  };

  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.

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