RC-Hierarchy

React Component Library for visualizing tree like hierarchical data.

Demo

https://rc-hierarchy-demo.vercel.app/

Installation

You can install this component via npm:

npm i rc-hierarchy

Or using yarn:

yarn add rc-hierarchy

Usage

import React from 'react'
import { Hierarchy } from 'rc-hierarchy'

function App() {
  const data = {
    root: {
      It: {
        'Software Development': {
          'Frontend Developer': {},
          'Backend Developer': {},
        },
        'Data Science & Analytics': {},
      },
      'Not-it': {
        'Sales & Marketing': {
          'Marketing Manager': {},
        },
        'Finance & Accounting': {},
      },
    },
  }
  const config = {}
  return <Hierarchy data={data} config={config} />
}

export default App

Props

List of props accepted by your component, along with their types and descriptions.

• data (Object): Data to be drawn
• config (Object, optional): Modified properties of drawing configuration

Config Object Properties

| Property | Default Value | Description | | -------------- | ------------- | ------------------------------------------------------------------------ | | isCompact? | false | Indicates whether to draw in compact mode (true) or normal mode (false) | | fontSize? | 16 | The size of the font used for text rendering | | fontFamily? | 'Arial' | The font family for text rendering | | xt? | 30 | The horizontal spacing from the parent's x position | | yt? | 30 | The vertical spacing applied for each depth level | | maxWid? | 100 | The maximum width for text boxes | | minWid? | 50 | The minimum width for text boxes | | strokeColor? | random | The color used for strokes (borders) | | strokeWidth? | 3 | The width of strokes (borders) | | boxSpacing? | 15 | The space between two text boxes | | boxPadding? | 4 | The space between the stroke/border and text content inside the text box | | boxRadius? | 5 | The roundness of the text boxes | | canvasPadding? | 20 | The space inside the canvas (padding) | | colorScheme? | random | The color scheme used for rendering |

Contributing

If you'd like to contribute to this project, please follow these steps:

1. Fork this repository
2. Create a new branch (git checkout -b feature)
3. Make your changes
4. Commit your changes (git commit -am 'Add new feature')
5. Push to the branch (git push origin feature)
6. Create a new Pull Request

License

This project is licensed under the MIT License.