@react-md/tree

Create accessible tree widgets following the tree view specifications using the material design styles and fairly customizable renderers and styles and reasonable defaults.

Installation

npm install --save @react-md/tree

It is also recommended to install these other packages as they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon \
  @react-md/material-icons \
  @react-md/list

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

The main export from this package is the Tree component which allows you to render a tree from TreeData which is really a lookup of Record<TreeItemId, TreeItem>. The Tree component is fully controlled and requires you to provide the selection and logic expansion with a few props. You can use the useTreeItemExpansion and useTreeItemSelection hooks to get pretty reasonable support out of the box including multi-select behavior.

If you are a Typescript user, this package also exports a decent amount of types to help out such as the TreeData, BaseTreeItem, and TreeItemSorter.

Here's a quick example:

import type { ReactElement, ReactNode } from "react";
import { render } from "react-dom";
import {
  Tree,
  TreeData,
  BaseTreeItem,
  useTreeItemExpansion,
  useTreeItemSelection,
} from "@react-md/tree";

interface MyTreeItem extends BaseTreeItem {
  name: string;
}

const data: TreeData<MyTreeItem> = {
  "item-1-id": {
    name: "Root Node",
    itemId: " item-1-id",
    parentId: null,
  },
  "item-2-id": {
    name: "Child 1",
    itemId: "item-2-id",
    parentId: "item-1-id",
  },
  "item-3-id": {
    name: "Child 2",
    itemId: "item-3-id",
    parentId: "item-1-id",
  },
};

export default function Example(): ReactElement {
  const selection = useTreeItemSelection([], false);
  const expansion = useTreeItemExpansion([]);

  return (
    <Tree
      id="example-tree"
      aria-label="Tree"
      data={data}
      {...selection}
      {...expansion}
    />
  );
}