pkdadson / react-organogram

Responsive organizational chart component for React.JS

react-organogram

Note

Responsive organizational chart component for React.JS

Made with create-react-library

Install

npm install --save react-organogram

Example

A beautiful organogram made with react-organogram

Usage

import React from 'react'

import { Organogram } from 'react-organogram'
import 'react-organogram/dist/index.css'

const lists = [
  {
    title: 'First level',
    description: 'Hello world',
    image:
      'https://www.vhv.rs/dpng/d/256-2569650_men-profile-icon-png-image-free-download-searchpng.png',
    children: [
      {
        title: 'Second level 1',
        description: 'Hello world',
        children: []
      },
      {
        title: 'Second level 2',
        description: 'Hello world',
        children: [
          {
            title: 'Third level 1',
            description: 'Hello world',
            children: [
              {
                title: 'Forth level 1',
                description: 'Hello world',
                children: []
              },
              {
                title: 'Forth level 2',
                description: 'Hello world',
                children: []
              }
            ]
          },
          {
            title: 'Third level 2',
            description: 'Hello world',
            children: [
              {
                title: 'Forth level 3',
                description: 'Hello world',
                children: []
              }
            ]
          }
        ]
      },
      {
        title: 'Second level 3',
        description: 'Hello world',
        children: [
          {
            title: 'Third level 3',
            description: 'Hello world',
            children: []
          }
        ]
      }
    ]
  }
]

const Example = () => {
  return (
    <Organogram lists={lists}>
      <h1 style={{ textAlign: 'center' }}>This is my header</h1>
    </Organogram>
  )
}

export default Example

Demo

Check the demo on CodePen which demonstrates various features of react-organogram.

License

MIT © pkdadson