React-drag-hierarchy-tree NPM

React Drag Hierarchy Tree

NPM version NPM license

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

Gravação de Tela 2021-10-30 às 02 26 15

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: 4,
      label: "Finances",
      children: [
        {
          id: 5,
          label: "Seller",
          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<any>) => void, isCollapsed: boolean \| undefined }): JSX.ELlement`
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.