A rotund-featured tree part for React.

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

The tree UI is ubiquitous in machine applications. There are loads of tree part libraries for React, nonetheless none were rotund-featured adequate to stand on their possess.

This library offers the total general aspects expected in a tree. You might contain out one or many nodes to pull and tumble into new positions, initiate and shut folders, render an inline invent for renaming, efficiently expose hundreds of objects, and present your possess node renderer to manipulate the vogue.

Set up

npm install react-arborist

Instance

Render the tree data construction.

const data = {
  id: "The Root",
  younger other folks: [{id: "Node A"}, {id: "Node B"}]
}

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

objective Node({ ref, styles, data}) {
  return (
    div ref={ref} style={styles.row}>
      div style={styles.indent}>
        {data.title}
      /div>
    /div>
  )
}

Contents

• Anticipated Files Construction
• Tree Ingredient API
• Node Renderer API
  • Styles Prop
  • Reveal Prop
  • Handlers Prop
  • Tree Prop

Anticipated Files Construction

The Tree part expects the data prop to be a tree-fancy data construction with the following form:

form Files = {
  id: string, /Required */
  younger other folks?: Files[]
  isOpen?: boolean
}

In case your data doesn’t search fancy this, that it is probably you’ll present a childrenAccessor prop. That it is probably you’ll more than probably moreover moreover present isOpenAccessor. The associated rate is known as a string or a objective.

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

Tree Ingredient

Unlike other Tree Parts, react-arborist is designed as a managed part. This intention the user will present the tree data and the handlers to update it. The staunch direct managed internally is for run and tumble, different, and bettering.

The staunch itsy-bitsy one in every of the Tree Ingredient must be a NodeRenderer objective as described below.

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

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

Node Renderer Ingredient

The Node Renderer is where you salvage to kill the tree your possess. You entirely possess the vogue and functionality. The props passed to it is miles going to allow you to attain regardless of you need to.

The most general node renderer will search fancy this:

objective NodeRenderer({
  innerRef, 
  styles, 
  data, 
  direct, 
  handlers, 
  tree
}) {
  return (
    div ref={innerRef} style={styles.row}>
      div style={styles.indent}>{data.id}/div>
    /div>
  )
}

The objective above is passed data for this particular person node, the DOM ref historical for run and tumble, the styles to direct the row within the virtualized list and the styles to indent potentially the most up-to-date node in keeping with its stage within the tree.

Styles Prop

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

Reveal Prop

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

Read More