React Js Data Tree

React Js Data Tree is a package that allows you to easily create a tree structure in your web application. With React Js Data Tree, you can pass your data object or array, and it will be displayed as a tree structure. This package is easy to use and customizable, allowing you to add additional HTML data and customize the styles of each box in the tree.

Installation To use React Js Data Tree, you will need to install the package using npm. To install, open your terminal and type the following command:

npm install react-js-data-tree-01

with extra html

Getting Started To get started with React Js Data Tree, you will need to pass your data object or array to the Tree component. Here is an example of how to use the Tree component:

Requirements

import React from 'react';
import { Tree } from 'react-js-data-tree-01';

let data = {
  "id": "0001",
  "type": "data tree",
  "name": "user",
  "child Data": {
    "array": [
      { "id": "1", "type": "new" },
      { "id": "2", "type": "new 1" },
      { "id": "3", "type": "new 2" },
      { "id": "4", "type": "new 3" }
    ]
  },
  "else arr": [
    { "id": "10001", "type": "None" },
    { "id": "10002", "type": "asdf" },
    { "id": "10005", "type": "adsfd" },
    { "id": "10007", "type": "ads" },
    { "id": "10006", "type": "d gdg " },
    { "id": "10003", "type": "d fdsf ds" },
    { "id": "10004", "type": "aaa" }
  ]
}

In this example, we import the Tree component from the react-js-data-tree-01 package and pass our data object to it using the data prop. This will render our data object as a tree structure in the browser.

Props

The Tree component accepts several props that allow you to customize the tree structure and add additional functionality.

data (required)

The data prop is the only required prop for the Tree component. This is the data object or array that you want to display as a tree structure. Here is an example of how to use the data prop:

<Tree data={data} />

heading

The heading prop allows you to add a heading to the top of the tree structure. This prop is not required. Here is an example of how to use the heading prop:

<Tree data={data} heading="Tree Heading" />

treeStyle The treeStyle prop allows you to style the outer div of the tree structure. This prop is not required. Here is an example of how to use the treeStyle prop:

<Tree data={data} treeStyle={{ background: 'red' }} />

boxStyle

The boxStyle prop allows you to style each box in the tree structure. This prop is not required. Here is an example of how to use the boxStyle prop:

properties :-

| name | isRequired | type | example | about |
| :---: | :---: | :---:| :---:| :---:|
| data | required | array or object | data= {['name', 'age']} or data = {{name:'user', age:30}} | Data is the object or array that you want to show in the tree. | heading |not required | "string" | heading="string" | Heading is the data that will be heading in the tree | treeStyle |not required | style object | treeStyle = {{background:'red'}} | The outer div of the tree will be styled in TreeStyle. | | boxStyle |not required | style object | boxStyle = {{background:'red'}} | Each box in the tree will be styled with BoxStyle. | | extraHtml |not required | function | extraHtml = {(data)=>{ console.log(data) return(<div>yourHtml</div>)}} | If any other HTML data is to be shown inside the box then it can be shown by extraHtml| | branchExtraHtml |not required | function | branchExtraHtml = {(data)=>{ console.log(data) return(<div>yourHtml</div>)}} | Where a branch is being built and some extra data is to be shown on it, then it will be shown through branchExtraHtml.| | onClick |not required | function | onClick = {(data)=>{ console.log(data)}} |If you want to do something on click of box then have to use onClick function it will return 2 parameters. 1st the data of that box and 2nd if getDataOnClick has been sent in it then that| | onClickBranch |not required | function | onClickBranch = {(data)=>{ console.log(data) return(<div>yourHtml</div>)}} |Same as onclick but it will return 2nd param getDataOnClickBranch| | getDataOnClick |not required | string | getDataOnClick = 'your key in data' | | | getDataOnClickBranch |not required | string | getDataOnClickBranch = 'your key in data' || | showKey |not required | string | showKey = 'your key in data' |showKey is the key show that you want to show| | showBranchKey |not required | string | showBranchKey = 'your key in data' |showBranchKey is the key show that you want to show in branch box.| | hideKey |not required | string | hideKey = 'your key in data' | hideKey is the key that you want to hide from box|

You can customize the tree by passing in additional props, such as a heading, styles, or event handlers. Here's an example:

<Tree
  data={data}
  heading="Tree Heading"
  treeStyle={{ background: 'red' }}
  boxStyle={{ background: 'blue' }}
  onClick={(data) => console.log(data)}
  extraHtml={(data) => <div>Extra HTML for {data.type}</div>}
/>