Github address: github.com/artdong/rea…

react-org-tree

A simple organization tree component based on react

Installation

# use npm
npm i react-org-tree

# use yarn
yarn add react-org-tree
Copy the code

Usage(Usage)

import OrgTree from 'react-org-tree';

const horizontal = false; // true: horizontal false: vertical
const collapsable = true; // true: foldable false: not foldable
const expandAll = true; // true: expand all false: fold all

const data = {
    id: 0.label: XXX Co., LTD..children: [{
        id: 1.label: 'Technology'.children: [{
            id: 4.label: 'Back-end Engineer'
        }, {
            id: 5.label: 'Front End Engineer'
        }, {
            id: 6.label: 'Operation and Maintenance Engineer'}]}, {id: 2.label: 'Personnel Department'
    }, {
        id: 3.label: 'Sales Department'
    }]
}

<OrgTree
    data={data}
    horizontal={horizontal}
    collapsable={collapsable}
    expandAll={expandAll}
>
Copy the code

3. Preview (a Preview)

Lateral (horizontal)

The longitudinal (vertical)

Expand in part

expandAll

Welcome to join the discussion. Address: github.com/daily-inter… .

For more technical articles, video tutorials and open source projects such as Angular1/2/4/5, Ionic1/2/3, React, Vue, wechat mini program, nodeJS, etc., please follow wechat official account – Full Stackerfect.