A full-featured tree component for React.

Demo: https://react-arborist.netlify.app/

The tree UI is ubiquitous in software applications. There are many tree component libraries for React, but none were full-featured enough to stand on their own.

This library provides all the common features expected in a tree. You can select one or many nodes to drag and drop into new positions, open and close folders, render an inline form for renaming, efficiently show thousands of items, and provide your own node renderer to control the style.

yarn add react-arborist

npm install react-arborist

Render the tree data structure.

const data = {
  id: "A",
  name: "Root",
  children: [
    { id: "B", name: "Node 1" },
    { id: "C", name: "Node 2" },
  ],
};

function App() {
  return <Tree data={data}>{Node}</Tree>;
}

function Node({ ref, styles, data }) {
  return (
    <div ref={ref} style={styles.row}>
      <div style={styles.indent}>{data.name}</div>
    </div>
  );
}

• Expected Data Structure
• Tree Component API
• Node Renderer API
  • Styles Prop
  • State Prop
  • Handlers Prop
  • Tree Prop
• Accessing the Tree Api from the Parent

The Tree component expects the data prop to be a tree-like data structure with the following type:

type Data = {
  id: string, /* Required */
  children?: Data[]
  isOpen?: boolean
  ...rest /* Any other data you wish to provide */
}

If your data does not look like this, you can provide a childrenAccessor prop. You can also provide isOpenAccessor. The value can be a string or a function.

<Tree childrenAccessor="items" ...
// Or
<Tree childrenAccessor={(node) => node.items} ...

Unlike other Tree Components, react-arborist is designed as a controlled component. This means the consumer will provide the tree data and the handlers to update it. The only state managed internally is for drag and drop, selection, and editing.

The only child of the Tree Component must be a NodeRenderer function as described below.

const NodeRenderer = ({
  innerRef, data, styles, handlers, state, tree
}) => ...

const MyApp = () =>
  <Tree>
    {NodeRenderer}
  </Tree>

The Node Renderer is where you get to make the tree your own. You completely own the style and functionality. The props passed to it should enable you to do whatever you need.

The most basic node renderer will look like this:

function NodeRenderer({ innerRef, styles, data, state, handlers, tree }) {
  return (
    <div ref={innerRef} style={styles.row}>
      <div style={styles.indent}>{data.id}</div>
    </div>
  );
}

The function above is passed data for this individual node, the DOM ref used for drag and drop, the styles to position the row in the virtualized list and the styles to indent the current node according to its level in the tree.

These are the properties on the styles object passed to the NodeRenderer.

These are the properties on the state object passed to the NodeRenderer.

These are the properties on the handlers object passed to the NodeRenderer.

The tree monitor provides methods to get and change the tree's internal state. A use case might be in a right click menu.

// In your node renderer
onContextMenu={() => {
  // Do something with all the selected nodes
  tree.getSelectedIds()
}}

Full Tree API Implementation

You may need to access the tree from the parent component. This can be done by passing a ref.

function MySection() {
  const tree = useRef(null)

  useEffect(() => {
    tree.current.scrollToId("B")
  }, [])

  return <Tree ref={ref} ... />
}

Authored by James Kerr