react-arborist icon indicating copy to clipboard operation
react-arborist copied to clipboard

Added useDynamicTree hook

Open jerryseigle opened this issue 1 year ago • 4 comments

I added a hook that supports dynamic data.

Currently there is a hook called useSimpleTree which keeps everything simple. It manages the tree data and provides all of the controller functions such as onCreate, onRename, onUpdate, onDelete. This makes it easy to use the tree however you have to provide initial data

I added a hook called useDynamicTree which works exactly like the simpleTree hook example it provides an option to allow us to set the data that will be used in the tree whenever we need to set it. Of course we can already use dynamic data simply by using the data prop provided in the Tree component. But what makes this hook needed is that it keeps everything simple for some of us that need to keep things simple. It provides all of the functions just like useSimpleTree. As you may know that when using the data prop in the tree we have to add the controller functions manually. With this hook you do not need to do that. Again it makes things simple.

Usage Example:

import { useDynamicTree } from "react-arborist";
import { useEffect } from "react";

function App() {
  // no need to pass anything in here just use the functions as needed
  const { data, setData, controllers } = useDynamicTree();

  useEffect(() => {
    // This would be where you make your api call or dynamic data
    const apiCall = [
      { id: "123", name: "item 1" },
      { id: "456", name: "item 2" },
    ];
    setData(apiCall);
  });

  return <Tree data={data} {...controllers} />;
}

jerryseigle avatar Aug 01 '23 05:08 jerryseigle