Wondering what’s next for npm?Check out our public roadmap! »

    react-organizational-chart
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    react-organizational-chart

    Simple react hierarchy tree - any React children accepted for nodes

    CI NPM styled with prettier

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

    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
    • 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

    4,828

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    467 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar