How to update rendering of the item on hover?

[rohitkrishna094]

Is your feature request related to a problem? Please describe. According to this example, we can hook into the renderItem method of a ControlledEnvironment component and customize the rendering of an item. But what to do if we want to update rendering of item when user hovers over the item. Say I want to add some element to the right side of the item whenever user hovers over the item and then remove that element whenever user "un-hovers" the item.

Describe the solution you'd like Just like how context parameter of type TreeItemRenderContext has many methods like isExpanded, isFocused etc, is there way to add another method saying isHovered. Or is there a simpler way to achieve this?

[lukasbach]

For the use case you described, the most performant way would be to add the the elements to the right of each item in their render prop, and just hide it with CSS when the user is not hovering. Since you can customize the render method, you could just add a custom class and define such logic in your CSS.

If you want to react to hover effects in JS, you can either manually hook an onMouseOver/onMouseOut handler into the item render method, or use a custom interaction mode to mount additional handlers, like here (source)

[rohitkrishna094]

Thanks for the reply. This works for me. I ended up using onMouseOver and onMouseOut.