@pseudocoder-in/ftcomponents

Resuable UI Componenents used in the Family Tree App

---

NavTree

UI Component to load and edit the tree data.

Usage

import { NavTree } from '@pseudocoder-in/ftcomponents';

<NavTree 
    theme: "dark", // light/dark
    data: treeData, // Tree data in Json format
    width: "100vw",
    height: "100vh",
    onUpdate: {(updatedTreeData) => { /* Handle updated data in the client side*/}}
/>

TreeViewer

Component to load the tree json data and display it in a tree like structure. It uses react-tree-graph and d3 libraries.

Usage

import { TreeViewer } from '@pseudocoder-in/ftcomponents';

<TreeViewer 
    theme: "dark", // light/dark
    data: treeData, // Tree data in Json format
    width: "100vw",
    height: "100vh",
    handleShare: () => { }, //Optional parameter
    handleFullScreen: () => { } //Optional parameter
/>

Sample Input Data (treeData)

export const treeData = {
    "1":{
        id:"1",
        name:"Rajeev Gupta",
        partner:" Nita Gupta",
        children:["2","3","4"],
        isRoot: true
    },
    "2":{
        id:"2",
        name:"Aalok kumar Gupta",
        partner:"Rhea Gupta",
        children:["5"],
    },
    "3":{
        id:"3",
        name:"Sanjeev Gupta",
        partner:"Roshani Gupta",
        children:[],
    },
    "4":{
        id:"4",
        name:"Robin Gupta",
        partner:"Raashi Gupta",
        children:[],
    },
    "5":{
        id:"5",
        name:"Sorabh Gupta",
        partner:"",
        children:[],
    },

}

Building from codes

• Clone the repository
• Run npm install
• Run yarn storybook for viewing the Componenents
• Run yarn build to create a buld in dist folder

More customization coming soon ... 😄