React Drag Hierarchy Tree

A React component for Drag-and-drop hierarchy tree data.

Table of Contents

• Getting Started
• Usage
• Props
• Data Helpers

Getting started

Install react-drag-hierarchy-tree using npm.

# NPM
npm install react-drag-hierarchy-tree --save
# YARN
yarn add react-drag-hierarchy-tree

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import OrgTreeComponent, { useTree } from 'react-drag-hierarchy-tree';

const data = {
  id: 1,
  label: 'President',
  children: [
    {
      id: 2,
      label: 'Administrative',
      children: [
        {
          id: 3,
          label: 'Director',
          children: [],
        },
      ],
    },
    {
      id: 2,
      label: 'Administrative',
      children: [
        {
          id: 3,
          label: 'Director',
          children: [],
        },
      ],
    },
  ],
};

const App = () => {
  const { treeRef } = useTree();

  const onClick = () => {
    treeRef.current?.onExpandNodes();
  };

  return (
    <div>
      <button onClick={onClick}>close/open</button>
      <OrgTreeComponent data={data} ref={treeRef} horizontal />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

Prop	Type	Description
data (required)	object[]	Tree data with the following keys: id is the primary and unique key. label is the primary label for the node. expand shows children of the node if true, or hides them if false. Defaults to false. style edit styles for the card container for each node. children is an array of child nodes belonging to the node. Example: [{id:'uui1', label: 'main'}, { id:'uui1', label: 'main' , expand: true, children: [] }] You can also add any key you what, thats is useful for the prop renderCard below, where tou can use to personalize your card component
ref (recommended)	ref	Is the ref ussed to get all methods related to the component, you should use the treeRef exported form the useTree hook.
horizontal	boolean	Set if tree should be horizontal or vertical (default: false )
renderCard	func	Ussed to replace the card component. It returns from the function ({ isDragging: bool, label: string, item: {id:string, label:'string'}, isPreviewCard }) => JSX.Element
renderButton	func	Ussed to replace the button collapse component. It returns from the function. `({ onClick: (event: MouseEvent) => void, isCollapsed: boolean
collapsable	bool	If childrens should collapse or not.
expandAll	bool	If the childrens should start expanded.
strokeColor	color	Color of line / stroke
strokeWidth	string	Line width. 1px 2px 3px 4px 5px
cardStyle	object	Card inline styles CSSProperties`.
buttonBackgroundColor	color	Collapse button color.

UseTree Hook

This hooks returns a ref that can access many data and helpers by ussing treeRef.current.

• data: Returns the actual hierarchy data.
• onExpandNodes: Expands or collapse all node.
• addChildrenById: Add a children node by id.
• removeById: Remove a node by id.
• editById: edit a node by id.
• findById: Find and return node by id.
• findParentByChildId: Return parent by child id.
• nestedObjectToArray: Transform the nested object to an array.
• arrayToNestedObject: Transform back the array to the nested object.

Pull requests are welcome!

License

MIT