feat(TreeContainer): support a render function for TreeContainer

Author: sbesselsen

README.md

@@ -71,6 +71,9 @@ Properties:
 * * `defaultState?: TreeState`: the state to start with. If you pass this, but not `state`, then `TreeContainer` will manage state internally (uncontrolled).
 * `onStateChange?: (st: TreeState) => void`: called whenever the tree state changes from within (usually through `useTreeController()`). Use this if you want to manage tree state in your own state container (like Redux).
 * `loaderOptions?: TreeLoaderOptions`: options for loading data from the tree source. See [useTreeLoader()](#usetreeloader).
+* `rootElement?: React.FC<{ tree: Tree<T> }>`: if passed, this element will be shown within the tree container. It will receive the tree as a prop.
+* `render?: (props: { tree: Tree<T> }) => ReactNode`: if passed, this function will be called and its output tree is rendered within the tree container.
+
 
 ### interface TreeSource
 Interface for a data source to fetch tree data, usually from a server. A data source should implement these two methods:

src/TreeContainer.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactElement, useCallback, useRef } from 'react';
+import React, { PropsWithChildren, ReactElement, ReactNode, useCallback, useRef } from 'react';
 import { useBinding } from 'use-binding';
 import { TreeContentContext } from 'use-tree-content';
 import { noopUpdateState, TreeController, TreeControllerContext, treeControllerFromUpdateState } from 'use-tree-controller';
@@ -11,11 +11,12 @@ interface TreeContainerProps<T> {
     state?: TreeState;
     onStateChange?: (st: TreeState) => void;
     rootElement?: React.FC<{ tree: Tree<T> }>;
+    render?: (props: { tree: Tree<T> }) => ReactNode;
     loaderOptions?: TreeLoaderOptions;
 }
 
 export function TreeContainer<T>(props: PropsWithChildren<TreeContainerProps<T>>, context?: any): ReactElement | null {
-    const { source, defaultState, state, onStateChange, rootElement, children, loaderOptions } = props;
+    const { source, defaultState, state, onStateChange, rootElement, render, children, loaderOptions } = props;
     const controller = useRef<TreeController<unknown>>(treeControllerFromUpdateState(noopUpdateState));
     const [innerState, setInnerState] = useBinding(defaultState, state, onStateChange, {});
 
@@ -28,7 +29,9 @@ export function TreeContainer<T>(props: PropsWithChildren<TreeContainerProps<T>>
     return (
         <TreeContentContext.Provider value={tree}>
             <TreeControllerContext.Provider value={controller.current}>
-                {rootElement ? React.createElement(rootElement, { tree }) : children}
+                {rootElement && React.createElement(rootElement, { tree })}
+                {render && render({ tree })}
+                {children}
             </TreeControllerContext.Provider>
         </TreeContentContext.Provider>
     );