How to update rendering of the item on hover?
rohitkrishna094 opened this issue · comments
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?
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)
Thanks for the reply. This works for me. I ended up using onMouseOver and onMouseOut.