} />


);
`

Examples

$3

!styled tree example

`jsx
const StyledNode = styled.div
padding: 5px;
border-radius: 8px;
display: inline-block;
border: 1px solid red;
;

const StyledTreeExample = () => (
lineWidth={'2px'}
lineColor={'green'}
lineBorderRadius={'10px'}
label={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

Components

$3

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
- 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 as a css length

$3

- 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 is highly customizable but can't render React components as nodes.

License

MIT © daniel-hauser