Need private packages and team management tools?Check out npm Teams »

react-organizational-chart

1.0.2 • Public • Published

react-organizational-chart

Simple react hierarchy tree - any React children accepted for nodes

NPM JavaScript Style Guide

Install

npm install --save react-organizational-chart

Usage

import React from 'react'
import { Tree, TreeNode } from 'react-organizational-chart'
 
const ExampleTree = () => (
  <Tree label={<div>Root</div>}>
    <TreeNode label={<div>Child 1</div>}>
      <TreeNode label={<div>Grand Child</div>} />
    </TreeNode>
  </Tree>
);

Examples

Styled tree

styled tree example

const StyledNode = styled.div`
  padding: 5px;
  border-radius: 8px;
  display: inline-block;
  border: 1px solid red;
`;
 
const StyledTreeExample = () => (
  <Tree
    lineWidth={"2px"}
    lineColor={"green"}
    lineBorderRadius={"10px"}
    label={<StyledNode>Root</StyledNode>}
  >
    <TreeNode label={<StyledNode>Child 1</StyledNode>}>
      <TreeNode label={<StyledNode>Grand Child</StyledNode>} />
    </TreeNode>
    <TreeNode label={<StyledNode>Child 2</StyledNode>}>
      <TreeNode label={<StyledNode>Grand Child</StyledNode>}>
        <TreeNode label={<StyledNode>Great Grand Child 1</StyledNode>} />
        <TreeNode label={<StyledNode>Great Grand Child 2</StyledNode>} />
      </TreeNode>
    </TreeNode>
    <TreeNode label={<StyledNode>Child 3</StyledNode>}>
      <TreeNode label={<StyledNode>Grand Child 1</StyledNode>} />
      <TreeNode label={<StyledNode>Grand Child 2</StyledNode>} />
    </TreeNode>
  </Tree>
);
 

Working examples can be found here

Components

Tree - The root of the tree

Accepts the following props:

  • label: (required) Any react Node
  • children: (required) Any number of <TreeNode>
  • lineHeight: (default 20px) The height of the Path as a css length
  • lineWidth: (default black) The width of the Path as a css length
  • lineColor: (default 20px) The color of the Path as a css color
  • lineBorderRadius: (default 5px) The color of the Path as a css border-radius
  • nodePadding: (default 5px) The left and right padding of every <TreeNode> as a css length

TreeNode - A node in the tree

  • label: (required) Any react Node
  • children: (required) Any number of <TreeNode>

Motivation

I created react-organizational-chart because i could not find any other react organizational chart that supports react components as nodes.

Alternatives

  • org-chart is highly customizable but can't render React components as nodes.

License

MIT © daniel-hauser

Install

npm i react-organizational-chart

DownloadsWeekly Downloads

234

Version

1.0.2

License

MIT

Unpacked Size

448 kB

Total Files

10

Last publish

Collaborators

  • avatar