Skip to main content

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.

An example using a StaticTreeDataProvider looks like this:

function App() {
const items = {
root: {
index: 'root',
hasChildren: true,
children: ['child1', 'child2'],
data: 'Root item',
},
child1: {
index: 'child1',
children: [],
data: 'Child item 1',
},
child2: {
index: 'child2',
hasChildren: 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>
);
}

Component Props

The props for the UncontrolledTreeEnvironment are as follows: