react-orgchart

A simple org chart for React.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-orgchart
1.0.55 years ago5 years agoMinified + gzip package size for react-orgchart in KB

Readme

Simple Org Chart for React

screen shot 2017-10-26 at 8 50 24 am
See the example project for demonstration of creating org chart data structure and using the OrgChart component.
This project focuses on the simplicity of its api.

Installation: Import Javascript and CSS

```jsx harmon import OrgChart from 'react-orgchart'; import 'react-orgchart/index.css';
### Step 1: Create the org chart tree as an object literal.
The ```children``` property of each node are rendered as children nodes.

```jsx harmony
const initechOrg = {
  name: "Bill Lumbergh",
  actor: "Gary Cole",
  children: [
    {
      name: "Peter Gibbons",
      actor: "Ron Livingston",
      children: [
        {
          name: "And More!!",
          actor: "This is just to show how to build a complex tree with multiple levels of children. Enjoy!"
        }
      ]
    },
    {
      name: "Milton Waddams",
      actor: "Stephen Root"
    },
    {
      name: "Bob Slydell",
      actor: "John C. McGi..."
    },
  ]
};

Step 2: Define a React Component for the nodes which receives each node object literal as a prop.

You can easily add functionality as you see fit to this node component. Pass down necessary data through the tree structure outlined above. ```jsx harmony const MyNodeComponent = ({node}) => { return (
<div className="initechNode" onClick={() => alert("Hi my real name is: " + node.actor)}>{ node.name }</div>
); };
### Final Step: Add the ```OrgChart``` component to your app.
```jsx harmony
<OrgChart tree={initechOrg} NodeComponent={MyNodeComponent} />

Additionally, you may want to style your org chart.

See Example project stylesheet for ideas.

Customizing Styles

Simple wrap your org chart in a div with an id and define styles like this:
.initechNode {
    border: solid 3px red;
    border-radius: 3px;
    padding: 5px;
    width: 150px;
    display: inline-block;
}

#initechOrgChart .orgNodeChildGroup .nodeGroupLineVerticalMiddle {
    border-right: solid 3px red
}

#initechOrgChart .nodeLineBorderTop {
    border-top: solid 3px red;
}