1.1.6 • Published 4 years ago
@pseudocoder-in/ftcomponents v1.1.6
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 indist
folder
More customization coming soon ... :smile:
1.1.6
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.0
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.13
4 years ago
0.1.12
4 years ago
0.1.11
4 years ago
0.1.10
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago