Custom React Tree

Description

A simple customizable tree component for react made on top of js-tree

Features

• Can use custom component for nodes
• Can use custom icons for collapse/expand

Example

Install

npm i js-tree-react

Usage

Basic example

data.json

{
  "name": "Top Parent",
  "children": [
    {
      "name": "Parent 1",
      "collapsed": true,
      "children": [
        {
          "name": "Child 1 level 1",
          "leaf": true,
          "children": [
            {
              "name": "Child 1 level 2",
              "leaf": true
            }
          ]
        },
        {
          "name": "Child 2 level 1",
          "leaf": true
        },
        {
          "name": "Child 3 level 1",
          "leaf": true
        },
        {
          "name": "Child 4 level 1",
          "leaf": true
        }
      ]
    },
    {
      "name": "Parent 2",
      "leaf": true
    },
    {
      "name": "Parent 3",
      "children": [
        {
          "name": "Child 1 level 1",
          "leaf": true,
          "children": [
            {
              "name": "Child 1 level 2",
              "leaf": true
            }
          ]
        }
      ]
    }
  ]
}

App.jsx

import React from "react";
import Tree from "js-tree-react";
import treeData from "./data.json";

const App = () => {
  const renderNode = (node) => {
    return <div>{node.name}</div>;
  };

  return (
    <div className="app">
      <Tree paddingLeft={15} tree={treeData} renderNode={renderNode} />
    </div>
  );
};

export default App;

A simple customized example can be found here : code sandbox example

API

Tree props

Name	Description	Type
paddingLeft	Left padding before the node	Number
tree	Object containing nodes	Object
renderNode	Function for rendering custom nodes	Function
collapseIconOpen	Icon for collapse node expand	Element
collapseIconClosed	Icon for collapse node collapse	Element

License

js-tree-react is released under the MIT license.

Made with ❤️ by kiranlm