Skip to content

react-virtualized-menu-tree is used for rendering large tree structures. It is built on top of the react-vtree (https://github.com/Lodin/react-vtree) library.

License

Notifications You must be signed in to change notification settings

dxmz/react-virtualized-menu-tree

Repository files navigation

NPM npm

react-virtualized-menu-tree

react-virtualized-menu-tree is used for rendering large tree structures. It is built on top of the react-vtree library.

Try the demo first, enjoy it.

Notice: This library rewrites some features of react-vtree, such as stylesbehaves. It is lightweight and simplifies usage and beautifies looks. Especially, this library is more suited to large-scale menu-tree scenarios.

democonsole

Installation

npm i react-virtualized-menu-tree

Usage

Demo source codes are put in library path example/src/app.js.

import React from 'react'
import { render } from 'react-dom'
import VirtualizedMenuTree from 'react-virtualized-menu-tree';
import 'react-virtualized-menu-tree/lib/css/style.css';

const tree = {
    name: 'Root #1',
    id: 'root-1',
    children: [
        {
            children: [
                {id: 'child-2', name: 'Child #2'},
                {id: 'child-3', name: 'Child #3'},
                {id: 'child-6', name: 'Child #6'},
                {id: 'child-7', name: 'Child #7'},
                {id: 'child-8', name: 'Child #8'},
                {id: 'child-9', name: 'Child #9'},
                {id: 'child-10', name: 'Child #10'},
                {id: 'child-11', name: 'Child #11'},
                {id: 'child-12', name: 'Child #12'},
                {id: 'child-13', name: 'Child #13'},
                {id: 'child-14', name: 'Child #142222222222222222'},
                {id: 'child-15', name: 'Child #15'},
                {id: 'child-16', name: 'Child #16'},
            ],
            id: 'child-1',
            name: 'Child #1',
        },
        {
            children: [{id: 'child-5', name: 'Child #5'}],
            id: 'child-4',
            name: 'Child #4',
        },
        {
            children: [
                {id: 'child-22', name: 'Child #22'},
                {id: 'child-23', name: 'Child #23'},
                {id: 'child-26', name: 'Child #26'},
                {id: 'child-27', name: 'Child #27'},
                {id: 'child-28', name: 'Child #28'},
                {id: 'child-29', name: 'Child #29'},
                {id: 'child-210', name: 'Child #210'},
                {id: 'child-211', name: 'Child #211'},
                {id: 'child-212', name: 'Child #212'},
                {id: 'child-213', name: 'Child #213'},
                {id: 'child-214', name: 'Child #214'},
                {id: 'child-215', name: 'Child #215'},
                {id: 'child-216', name: 'Child #216'},
            ],
            id: 'child-21',
            name: 'Child #21',
        },
    ],
};

const App = () => <VirtualizedMenuTree clickNodeCallback={(e,params) => {console.log(e, params)}}
                                       width={'200px'}
                                       itemSize={40}
                                       treeData={tree}/>;

render(<App />, document.getElementById('root'));

API

1. treeData

Data format please referen demo source codes.

2. itemSize

Default: 30 (px)
TreeData item size is controlled by itemSize, so you could set you self-defined item size.

This library is based on 'FixedSizeTree' of 'react-vtree'.

3. width & height

width:
Default: 100%

height:
Default: 500 (px)
Notice : height must be number type.

4. clickNodeCallback

Default: null
clickNodeCallback will be invoked when you click any node in menu tree, and passing eventnode info params to the callback function.

5. toggleUpIcon & toggleDownIcon

Default:

<span className={'node-toggle-icon'}>+</span>
<span className={'node-toggle-icon'}>-</span>

You could pass self-defined React Node or String to replace them.

6. isOpenByDefault

Default: true
Menu tree default open all children node. If you want change it, just pass false to close all opened children.

7. treeWalker

An iterator function that walks around the tree and yields each node one by one flattening them to an array that can be easily displayed by FixedSizeList component.
Notice : more detail please visit react-vtree.

If you want pass more props please visit `react-vtree` npm website.

About

react-virtualized-menu-tree is used for rendering large tree structures. It is built on top of the react-vtree (https://github.com/Lodin/react-vtree) library.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published