Neverending Package Mountain

    react-hook-tree

    0.0.1-beta.34 • Public • Published

    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

    React Hook Tree in action

    Quick start

    Install

    NPM

    npm install --save react-hook-tree

    YARN

    yarn add react-hook-tree

    Run on sandbox

    Edit pedantic-curran-49riv

    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" }} />
    

    Coming Features

    • Add Json language files
    • Add storybook for better documentation
    • Jest test
    • Css module
    • Checkbox select
    • Add new nodes
    • Add Multiple node selection
    • Drag and drop in React Tree View/Tree List
    • Sorting tree nodes
    • Tree node with custom icons
    • Delete & Edit animation
    • Style modal
    • Lazy loading
    • Better Readme and fix the spelling errors :)
    • Create a dedicated website
    • Create a slack and provide free support
    • Codes & Algorithmes optimisation
    • Writing contributing guidelines
    • Pull request template
    • Issue templates

    feel free to ask for any feature or report a bug buy add in a new issue add new issue

    License

    Copyright (c) 2020 Temkit Sidali. Licensed under the MIT license.

    Icons from www.flaticon.com From :

    Dependencies :

    Install

    npm i react-hook-tree

    DownloadsWeekly Downloads

    15

    Version

    0.0.1-beta.34

    License

    MIT

    Unpacked Size

    84.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • temkit