family-binary-tree v1.0.4

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