A Simple Hierarchy Tree View For React

A Simple Hierarchy Tree View For React

Simple react hierarchy tree - any React children accepted for nodes

react-organizational-chart

Simple react hierarchy tree - any React children accepted for nodes

Install

npm install --save react-organizational-chart

Usage

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

Examples

Styled tree

styled tree example

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

Interactive examples can be found here

Components

Tree - The root of the tree

Accepts the following props:

  • label: (required) Any react Node
  • children: (required) Any number of <TreeNode>
  • 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
  • lineBorderRadius: (default 5px) The color of the Path as a css border-radius
  • nodePadding: (default 5px) The left and right padding of every <TreeNode> as a css length

TreeNode - A node in the tree

  • label: (required) Any react Node
  • children: (required) Any number of <TreeNode>

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.

Download Details:

Author: daniel-hauser The Demo/Documentation: View The Demo/Documentation Download Link: Download The Source Code Official Website: https://github.com/daniel-hauser/react-organizational-chart License: MIT © daniel-hauser

react javascript web-development

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

Hire India's Best React JS Developers| Hire React JS Development Company

Looking to hire top dedicated Reactjs developers in India at affordable prices? Our 5+ years of average experienced Reactjs developers comprise proficiency in delivering the most complex and challenging web apps. Hire ReactJS development...

Top React JS Development Company | React JS Development Services

As a leading React.js development company, our development team has created reusable React.js components, large-scale websites, and interactive user interfaces for global clients. 4200+ Projects | 16+ Yrs Exp