React-hook-tree NPM

React Hook tree

Introduction

Get started with React Hook Tree. the most powerful Tree View React Component for building responsive, mobile-first lightweight Trees.

Full Features

Display hierarchical data in a tree-view structure.
Edit, Add and Delete nodes
Expand/Collapse
Custom & multiple node object attributes
Unlimited nesting
Fully customizable text content (you can deploy in any language)
RTL support
Fully customizable style

Demo and documentation : rht.now.sh

Quick start

Install

NPM

npm install --save react-hook-tree

YARN

yarn add react-hook-tree

Run on sandbox

Example

import data from "./treeData.json";
import Tree from "react-hook-tree";

<Tree treeData={data} />

Demo And Documentation

rht.now.sh

Props

Data

Option	types	required	default	Description
treeData	Json Object	yes	-	the data to render (please see json file in data folder)
checkbox	Boolean	no	-	Show check box and add select support for nodes
count	Boolean	no	-	Show children count on each node
lang	Json Object	yes	-	Text content, please see Lang Object Attribute
node	Json Object	no	-	Node object attributes Attribute, please see Data Object Attribute
edit	Boolean	no	false	Show the edit button
add	Boolean	no	false	Show the add button
remove	Boolean	no	false	Show the remove button
onChange	Function	no	-	Return the modified json data, if actions (edit, delete) are are enabled

Data Format : TreeData prop

{
    tree: [
	    {
	    _id: "",
	    children: []
	    item: { name: "", ... }
    }
]

See data example files in Data folder

Text, content & languages : Lang prop

{
    "rtl":true,
    "modal": {
				"add": {
					"title": "Add Modal",
					"warning": "Check carfully your data before saving !",
					"content": "You are Adding a new node",
					"button": "save"
				},
	    "edit": {
		    "title": "Edit Modal",
		    "warning": "Check carfully your data before saving !",
		    "content": "You are editing the %1 node",
		    "button": "save"
	    },
	    "delete": {
		    "title": "Are you absolutely sure?",
		    "warning": "Unexpected bad things will happen if you don’t read this!",
		    "content": "This action cannot be undone. This will permanently delete the %1, and remove all children associations. Please type confirmed to delete.",
		    "confirmation": "please type %1 to delete",
		    "verification": "confirm",
		    "button": "delete this node"
	    }
    }
}

See Lang example file in Lang folder

Add Edit action : node props

Each node has a name which is an unchanging attribute.

with node prop you can add more attribute to each node, here for example i will add a title and a checkbox.

Each node will be editable over an edit button which triggers a popup modal where you can edit node's data.

data edit node

you can configure what ever data you want in these types : input text and checkbox, more data types will be available in next updates.

each data configuration have these attributes : name, type, placeholder

[
    {
	    name: "title",
	    type: "text-input",
	    placeholder: "Title",
    },

    {
	    name: "active",
	    type: "checkbox",
	    value: 0,
	    datatype: "int",
	    label: "activé le type",
    },

]

enter image description here

as you can see the attributes are used to dynamically create a form to edit the node's data.

Remove Action

Each node can be removed,

by setting the remove props to true,

if a node is deleted all its children will be deleted, This action cannot be undone. This will permanently delete the node, and remove all children associations.

enter image description here

Style

Option	types	required	Description
iconType	String	no	one of ("folder","rounded","thick") or leave empty for simple arrow
style	React Style Props	no	Global container inline style
lineStyle	React Style Props	no	Line inline style
iconStyle	React Style Props	no	Icon inline style
compact	Boolean	no	add padding to line

Text, Content && Languages supports

all the text used have to be added using a JSON object, so you can deploy the component in any language you want. you can also add the attribute "rtl" as true, to deploy in any rtl languages.

Get the data

to get the data modified if you use the onChange props, you can simply do :

const [data, setData] = useState(json);

useEffect(() => {
    console.log(data);
}, [data]);

...

<Tree treeData={data} onChange={setData} lineStyle={{color: "blue" }} />