1.1.2 • Published 1 year ago
rc-hierarchy v1.1.2
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-hierarchyOr using yarn:
yarn add rc-hierarchyUsage
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 AppProps
List of props accepted by your component, along with their types and descriptions.
data(Object): Data to be drawnconfig(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:
- Fork this repository
- Create a new branch (
git checkout -b feature) - Make your changes
- Commit your changes (
git commit -am 'Add new feature') - Push to the branch (
git push origin feature) - Create a new Pull Request
License
This project is licensed under the MIT License.