Skip to content

fosco/react-expandable-treeview

Repository files navigation

react-expandable-treeview

npm version

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';
  1. 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
                    }
                ]
            }
        ]
    }
]
  1. 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.

Prop Name Type Is Required Default Value Description
data array required - The data to display.
renderNode func required - The node render function
lineColor string optional '#4B6DAA' The color of the tree lines
lineWidth number optional 0.5 Thickness of the tree lines
lineStyle string optional 'solid' Style of the tree lines. Can be 'solid', 'dotted', etc. (all the possible values for 'border-style' CSS attribute)
lineAlpha number optional 0.4 The alpha value of the tree lines
expandButtonColor string optional '#4B6DAA' The color of the expand button
nodeSize number optional 20 The size of the tree leaf icons
nodeIcon string optional [blue dot] The node icon. Must be a base64 imported image

About

A simple and fully customizable tree view React component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published