use-tree-data v0.1.3

use tree data

English | 简体中文

A super-light React hook to manage tree data easier.

Features

• built in CRUD handler: insert, remove, move, update, filter
• custom recursive structure support
• typescript support

Usage

Install

$ yarn add use-tree-data
$ npm install use-tree-data --save

Initialization

example

Basic

import useTreeData from 'use-tree-data';

const App = () => {
  const [tree, actions] = useTreeData(treeData);

  const insertToRoot = () => {
    actions.insert({ id: 'node-1', name: 'node-1' });
  };
  const removeNode1 = () => {
    actions.remove(n => n.id === 'node-1');
  };

  // ...
};

Initial With Options

const App = () => {
  const [tree, actions] = useTreeData<CustomDataType>(treeData, {
    insertPosition: 'TAIL',
    childrenKey: 'leafs',
  });
};

API

const [
  tree,
  { setTree, insert, remove, update, move, setFilter, find, forEach, getPath },
  treeHelper,
] = useTreeData<DataType>(data?: DataType[], option?: TreeHelperOptions<DataType>)

TreeHelperOptions

Hook Returned Value

Actions