https://github.com/daniel-hauser/react-organizational-chart

Simple react hierarchy tree - any React children accepted for nodes
https://github.com/daniel-hauser/react-organizational-chart

chart org-chart react tree

Last synced: 11 days ago
JSON representation

Simple react hierarchy tree - any React children accepted for nodes

• Host: GitHub
• URL: https://github.com/daniel-hauser/react-organizational-chart
• Owner: daniel-hauser
• License: mit
• Created: 2019-06-07T15:40:26.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-24T08:43:52.000Z (5 months ago)
• Last Synced: 2024-10-29T12:59:40.639Z (15 days ago)
• Topics: chart, org-chart, react, tree
• Language: TypeScript
• Homepage: https://daniel-hauser.github.io/react-organizational-chart
• Size: 8.19 MB
• Stars: 180
• Watchers: 3
• Forks: 36
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-organizational-chart

> Simple react hierarchy tree - any React children accepted for nodes

![CI](https://github.com/daniel-hauser/react-organizational-chart/workflows/CI/badge.svg)

[![NPM](https://img.shields.io/npm/v/react-organizational-chart.svg)](https://www.npmjs.com/package/react-organizational-chart)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

## Install

```bash

npm install --save react-organizational-chart

```

## Usage

```jsx

import React from 'react';

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

const ExampleTree = () => (

  Root}>

    Child 1}>

      Grand Child} />

    

  

);

```

## Examples

### Styled tree

![styled tree example](images/styled_tree.png)

```jsx

const StyledNode = styled.div`

  padding: 5px;

  border-radius: 8px;

  display: inline-block;

  border: 1px solid red;

`;

const StyledTreeExample = () => (

  Root}

  >

    Child 1}>

      Grand Child} />

    

    Child 2}>

      Grand Child}>

        Great Grand Child 1} />

        Great Grand Child 2} />

      

    

    Child 3}>

      Grand Child 1} />

      Grand Child 2} />

    

  

);

```

Interactive examples can be found [here](https://daniel-hauser.github.io/react-organizational-chart/)

## Components

### `Tree` - The root of the tree

Accepts the following props:

- **label:** _**\(required\)**_ Any react `Node`

- **children:** _**\(required\)**_ Any number of ``

- **lineHeight:** _\(default 20px\)_ The height of the Path as a [css length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)

- **lineWidth:** _\(default 1px\)_ The width of the Path as a [css length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)

- **lineColor:** _\(default black\)_ The color of the Path as a [css color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)

- **lineStyle:** _\(default solid\)_ The line style as a [css line-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#values)

- **lineBorderRadius:** _\(default 5px\)_ The border radius of the Path as a [css border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)

- **nodePadding:** _\(default 5px\)_ The left and right padding of every `` as a [css length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)

### `TreeNode` - A node in the tree

- **label:** _**\(required\)**_ Any react `Node`

- **children:** _**\(required\)**_ Any number of ``

## 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](https://www.npmjs.com/package/orgchart) is highly customizable but can't render React components as nodes.

## License

MIT © [daniel-hauser](https://github.com/daniel-hauser)