Uncontrolled Environment

Using an uncontrolled environment to declare the state of your tree is mostly documented in the Get Started document. You need to declare your data by implementing a TreeDataProvider that declares how tree items can be loaded by React Complex Tree. Alternatively, you can just provide a StaticTreeDataProvider that contains a static reference to all available data.

You can read more about implementing a custom TreeDataProvider implementing a custom TreeDataProvider here, as well as more details on how to use the static tree data provider.

An example using a StaticTreeDataProvider looks like this:

Live Editor

function App() { const items = { root: { index: 'root', isFolder: true, children: ['child1', 'child2'], data: 'Root item', }, child1: { index: 'child1', children: [], data: 'Child item 1', }, child2: { index: 'child2', isFolder: true, children: ['child3'], data: 'Child item 2', }, child3: { index: 'child3', children: [], data: 'Child item 3', }, }; return ( <UncontrolledTreeEnvironment dataProvider={new StaticTreeDataProvider(items, (item, data) => ({ ...item, data }))} getItemTitle={item => item.data} viewState={{}} > <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" /> </UncontrolledTreeEnvironment> ); }

function App() {
  const items = {
    root: {
      index: 'root',
      isFolder: true,
      children: ['child1', 'child2'],
      data: 'Root item',
    },
    child1: {
      index: 'child1',
      children: [],
      data: 'Child item 1',
    },
    child2: {
      index: 'child2',
      isFolder: true,
      children: ['child3'],
      data: 'Child item 2',
    },
    child3: {
      index: 'child3',
      children: [],
      data: 'Child item 3',
    },
  };

  return (
    <UncontrolledTreeEnvironment
      dataProvider={new StaticTreeDataProvider(items, (item, data) => ({ ...item, data }))}
      getItemTitle={item => item.data}
      viewState={{}}
    >
      <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
    </UncontrolledTreeEnvironment>
  );
}

Result

Loading...

Note that for each item in the data structure representing the tree (items in this case), each object must have a field named index that has the same value as the key for that object. The children array can only refer to these values as well.

Component Props

The props for the UncontrolledTreeEnvironment are as follows: