js-tree-react v1.0.3

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

License

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

Made with :heart: by kiranlm