Skip to main content

Renaming Functionality

React Complex Tree provides native renaming capabilities which are enabled by default. They can be disabled by providing the canRename prop with the value false.

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

Live Editor
Result
Loading...

Example with disabled renaming

If canRename is set to false, renaming is disabled.

Live Editor
Result
Loading...

Reacting to rename events

Via onRenameProp

Both the UncontrolledTreeEnvironment and ControlledTreeEnvironment provide a onRenameItem prop to which can be reacted to.

Live Editor
Result
Loading...

Via StaticTreeDataProvider

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

Live Editor
Result
Loading...

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.

Programmatic interaction

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.