react-organizational-hierarchy

Simple react hierarchy tree - any React children accepted for nodes based on react-organizational-chart but replaces @emotion/css with css modules

Install

npm install --save react-organizational-hierarchy

Usage

import React from 'react';
import { Tree, TreeNode } from 'react-organizational-hierarchy';

const ExampleTree = () => (
  <Tree label={<div>Root</div>}>
    <TreeNode label={<div>Child 1</div>}>
      <TreeNode label={<div>Grand Child</div>} />
    </TreeNode>
  </Tree>
);

Examples

Styled tree

const StyledNode = ({children}) => (
  <div
    style={{
      padding: '5px',
      borderRadius: '8px',
      display: 'inline-block',
      border: '1px solid #ff0000',
    }}
  >
      {children}
  </div>
)

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>
);

Interactive 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 1px) The width of the Path as a css length
• lineColor: (default black) The color of the Path as a css color
• lineStyle: (default solid) The line style as a css line-style
• lineBorderRadius: (default 5px) The border radius 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>

License

MIT ©