react-expandable-treeview v1.0.1

react-expandable-treeview

A simple and fully customizable tree view React component

Check out the live demo!

Quick start

1. Install the package using yarn add react-expandable-treeview or npm install react-expandable-treeview

2. Import the TreeView component

import TreeView from 'react-expandable-treeview';

3. Define the data you want to pass to TreeView. It should be a recursive array of elements with an unique id and a children optional prop for children elements. Each one of them will be rendered as a tree node. Here is the base object model:

    {
        id: 0,
        children: [
            //...all the children elements*/
        ],
        // ...other user-defined object properties
    }

And an example of the data prop o be passed to TreeView component.

const data = [
    {
        id: 0,
        children: [
            {
                id: 1
            },
            {
                id: 2
            }
        ],
        id: 3,
        children: [
            {
                id: 4,
                children: [
                    {
                        id: 5
                    }
                ]
            }
        ]
    }
]

4. The TreeView component has two required props: data and renderNode. The renderNode prop is a function that allows you to represent the nodes of the tree as fully customizable React components: you can define their structure. In the example we add a custom label attribute to our data elements and we want it to be rendered.

const data = [
    {
        id: 0,
        label: 'A Father'
        children: [
            {
                id: 1,
                label: 'A Son'
            },
            {
                id: 2,
                label: 'Another Son'
            }
        ],
        id: 3,
        label: 'Another Father',
        children: [
            {
                id: 4,
                children: [
                    {
                        id: 5,
                        label: 'Yet Another Son',
                    }
                ]
            }
        ]
    }
]

Now we can render the component inside our application:

<TreeView
    data={data}
    renderNode={({ label }) => <div>{label}</div>}
/>

Props

Here are the props you can pass to TreeView.