### Install react-organizational-chart

Source: https://github.com/daniel-hauser/react-organizational-chart/blob/master/README.md

Command to install the library using npm.

```bash
npm install --save react-organizational-chart
```

--------------------------------

### Styled React Organizational Chart Usage

Source: https://github.com/daniel-hauser/react-organizational-chart/blob/master/README.md

Example of creating a styled organizational chart with custom node components and tree line properties like color and width.

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

--------------------------------

### Basic React Organizational Chart Usage

Source: https://github.com/daniel-hauser/react-organizational-chart/blob/master/README.md

Demonstrates how to create a simple organizational chart using the `Tree` and `TreeNode` components with basic labels.

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

--------------------------------

### Tree Component API

Source: https://github.com/daniel-hauser/react-organizational-chart/blob/master/README.md

Documentation for the `Tree` component, outlining its props for customization.

```APIDOC
Tree:
  Props:
    label: (required) Any react Node to display as the root node's label.
    children: (required) Any number of `<TreeNode>` components representing the direct children of the root.
    lineHeight: (default: '20px') The height of the connecting lines. Accepts any valid CSS length unit.
    lineWidth: (default: '1px') The width of the connecting lines. Accepts any valid CSS length unit.
    lineColor: (default: 'black') The color of the connecting lines. Accepts any valid CSS color.
    lineStyle: (default: 'solid') The style of the connecting lines. Accepts any valid CSS border-style.
    lineBorderRadius: (default: '5px') The border radius of the connecting lines. Accepts any valid CSS border-radius.
    nodePadding: (default: '5px') The horizontal padding for each node. Accepts any valid CSS length unit.
```

--------------------------------

### TreeNode Component API

Source: https://github.com/daniel-hauser/react-organizational-chart/blob/master/README.md

Documentation for the `TreeNode` component, defining its props for creating nodes within the tree.

```APIDOC
TreeNode:
  Props:
    label: (required) Any react Node to display as the node's label.
    children: (required) Any number of `<TreeNode>` components representing the children of this node.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.