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...

Component Props

The props for the UncontrolledTreeEnvironment are as follows: