The interaction mode for a tree environment refers to how mouse inputs should interact with the tree.
The interaction mode can be provided as prop to the tree environment with the name
interactionMode and needs
to follow the
The following interaction modes are provided by default:
Clicking on items only moves focus. Pressing the CTRL key while clicking toggles the select state of the clicked item. Expanding items is only possible by clicking on the arrow or via keyboard interactions. Clicking on an item without children invokes the primary action for that item.
This is the default interaction mode. Clicking on items changes the select state to only the clicked item, focuses the item and expands or collapses the item if it has children. Pressing the CTRL key while clicking toggles the select state of the clicked item. Clicking on an item without children invokes the primary action for that item.
This resembles the way how VSCode provides interactions with its tree view.
This is the default interaction mode. Clicking on items changes the select state to only the clicked item, but does not expand or collapse parents or execute primary actions. Double clicking an item expands or collapses parents and invokes primary actions on items without children. Pressing the CTRL key while clicking toggles the select state of the clicked item.
This resembles the way of IntelliJ or other Jetbrain IDEs provides interactions with its tree view.
Custom interaction modes
Instead of providing a string referring to the desired interaction mode, you can also provide a custom interaction manager implementation which implements the InteractionManager implementation.
Essentially, it needs to implement a
createInteractiveElementProps method which provides HTML props for
a interactive tree item node. Look into the API to see which
parameters are available as arguments.
The best way to get started is to look into the implementations of existing interaction modes, to see which props you should implement.
The following example shows a custom very simple interaction mode which only focuses items when clicking on them, but never selects them.
Typically, you don't want to implement the complete interaction manager yourself. You can specify one
of the default interaction modes that you want to extend with the
Completely omitting interaction modes
The interaction mode defines, how the
interactiveElementProps prop is created for rendering the interactive
element of an tree item. The prop can also easily be omitted in custom render implementations and individual DOM
interactions can be defined instead.
Look into the documentation on custom render hooks to find out more.