Added useDynamicTree hook

[jerryseigle]

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} />;
}

[jameskerr]

Hi @jerryseigle I appreciate your PR. Thank you for the time. I am seeing the need from you and others for a simpler interface to the tree, but I'm not certain this is it. I'll take some time to consider what the API should be going forward. This is a good idea though and I expect to take inspiration from it.

In the meantime, users can use your PR as an example of creating their own controllers for the tree.

[jerryseigle]

@jameskerr sounds great. Do you have an estimated ETA when you will be releasing new API.

[jameskerr]

I do not have an ETA. But I like working on the project and enjoy spending some of my free time making it better.

[kurdin]

@jerryseigle thanks for that hook, this is exactly what I needed.
@jameskerr without this hook, I could not find how to get the whole tree data out of your component on any actions: onMove, onCreate...

I think this hook is what you need to add or just export setData on useSimpleTree and it take not only initialData but update data as well.

BTW, I am trying to store tree structure in sqlite and I do have order for items (indexes in your component) but in order to get UI and backend in sync, I need to send the those leafs items order back to db. No sure if there is a better way to store a tree in SQL table.

Thanks for great component, pleasure use it, well designed.