Skip to main content

Managing a tree's view state

Both the controlled and uncontrolled environment define a viewState prop which specifies the visual state of each tree, i.e. which items are focused, selected and expanded. For the controlled environment, this always reflects the current visual state, and needs to be manually updated if the user interacts with the tree. For the uncontrolled environment, the value supplied is used as initial state.

Providing a static state for controlled environments

When providing a view state for a controlled environment, that state remains static independent of user actions.

Live Editor

Updating the state for controlled environments

You can implement change hooks to the environment to update the view state dependent on user actions.

Read the Documentation on controlled environments for more details.

Live Editor

Providing an initial view state for uncontrolled environments

For uncontrolled environments, the viewState prop defines the initial visual state of the tree, but user interactions will change the state. You can still implement update hooks to get notified about changes to the state.

Live Editor

Maintaining the state of multiple trees

When you have several trees in your environment, you need to maintain their states as respective objects within the environment viewState.

Live Editor

Providing custom view state

You can also provide custom view state properties for your tree data. Provide the keys of your custom properties as the second type argument to your environment, then declare them as additional properties on the viewState object.

You can then use the context.viewStateFlags property on you item render logic to check whether the item has the respective flag or not.

function App() {
return (
<UncontrolledTreeEnvironment<ItemData, "activeItems" | "disabledItems">
dataProvider={new StaticTreeDataProvider(longTree.items, (item, data) => ({ ...item, data }))}
getItemTitle={item =>}
['tree-1']: {
activeItems: ['America', 'Europe', 'Asia'],
disabledItems: ['Meals', 'Drinks'],
renderItem={({ item, depth, children, title, context, arrow }) => {
// Use boolean flags ``context.viewStateFlags.activeItems`` and ``context.viewStateFlags.disabledItems``
// to check if the item has the respective flags.
{/* ... */}