React Complex Tree provides native renaming capabilities which are enabled by default. They an be disabled
by providing the
canRename prop with the value
If renaming is enabled, the user can hit the hotkey
F2, and the title component of the focused item
is replaced with an input. The rendering of that component can be customized with
custom render hooks. The hotkey can also be customized.
When the input is blurred, i.e. the user clicks on somewhere else, or presses
escape, the renaming is aborted,
the input is replaced with the title component again and changes made to the title are omitted. If the user clicks
on the submit button or submits the input by pressing enter, the name of the item is changed.
Example with disabled renaming
canRename is set to false, renaming is disabled.
Reacting to rename events
ControlledTreeEnvironment provide a
to which can be reacted to.
StaticTreeDataProvider also defines a method that is provided as the second argument to the constructor,
which is invoked if a item is renamed. This method is expected to return the renamed item.
Via a custom tree data provider
When implementing a custom tree data provider, a method
onRenameItem can be implemented to react to rename
events. Read more on implementing custom tree data providers
for more details.
This feature can programmatically be controlled by pulling a React Ref either from the tree environment or the tree itself, and acting on the Ref object. Read the documentation on externally interacting with the tree via Refs to find out more.