Family Binary Tree

family-binary-tree is a JavaScript library for creating and manipulating hierarchical binary tree structures.

Live Demo

Check out the live demo here: https://soemxui195.github.io/family-binary-tree/

Installation

The easiest way to use Family Binary Tree is to install it from NPM and include it in your own React build process.

NPM

npm install family-binary-tree

YARN

yarn add family-binary-tree

Usage

Require the BinaryTree component and render it with JSX:

import React, { Component } from "react";

import BinaryTree from "family-binary-tree";

const data = [
  {
    id: 1,
    left_child_id: 2,
    right_child_id: 3,
    username: "User 1",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 2,
    left_child_id: 4,
    right_child_id: 5,
    username: "User 2",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 3,
    left_child_id: 6,
    right_child_id: null,
    username: "User 3",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 4,
    left_child_id: 7,
    right_child_id: 8,
    username: "User 4",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 5,
    left_child_id: null,
    right_child_id: null,
    username: "User 5",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 6,
    left_child_id: null,
    right_child_id: null,
    username: "User 6",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 7,
    left_child_id: 9,
    right_child_id: null,
    username: "User 7",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 8,
    left_child_id: null,
    right_child_id: 10,
    username: "User 8",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 9,
    left_child_id: null,
    right_child_id: null,
    username: "User 9",
    image: "https://i.imgur.com/yzUDPMJ.png"
  },
  {
    id: 10,
    left_child_id: null,
    right_child_id: null,
    username: "User 10",
    image: "https://i.imgur.com/yzUDPMJ.png"
  }
];
class App extends Component {
    render(){
        <div>
            <BinaryTree
                allUsers={data}
                rootUser={data[0]}
                bgSideBar={'#333'}
                colorText={'#333'}
                colorSideBar={'#fff'}
                // imageFake={'https://imgur.com/PE0P672.png'}
                // nameFake={'undefined'}  
                // bgButton={'blue'}
                // colorButton={'black'}
                // disableSideBar
                // disableNavigation
                // renderNode={user=>{
                //   return (<div>Node</div>);
                // }}
                // renderDetail={user => {
                //   return <div>User</div>;
                // }}
            />
        </div>
    }
}

render(<App />, document.getElementById('app'))

API

Property	Description	Type	Default
allUsers	TreeNodes data Array, 3 required fields id, left_child_id, right_child_id. With id as root, left_child_id and right_child_id are 2 child branches	array<{ id, left_child_id, right_child_id }>	-
rootUser	Choose the root of a binary tree	array[0]	-
maxDeep	Stratification level of the tree. Maximum of 4	number	-
disableSideBar	Disables the sidebar of the binary tree	boolean	false
disableNavigation	Disables the navigation button of the binary tree	boolean	false
imageFake	Customize image data null of the binary tree	string	-
nameFake	Customize name text data null of the binary tree	string	-
renderNode	Customize node of the binary tree	Function	-
renderDetail	Customize detail node of the binary tree	Function	-
colorText	Color of the text Node	string	-
bgSideBar	Background color of the sidebar	string	-
colorSideBar	Color of the sidebar	string	-
bgButton	Background color of the navigation button	string	-
colorButton	Color of the navigation button	string	-