react-dnd: Dragging Over An Element Without Triggering Hover State
Daniel Bellmas
Posted on September 23, 2022
This is an answer to a react-dnd v17 bug.
It's still a bug even though it's marked as closed in Github.
I tried the suggestions display in the issue thread, but The only thing that helped me is this:
Instead of using monitor.isDragging() to set the isDragging state use !!monitor.getItem(), like so:
const [{ opacity, isDragging }, drag] = useDrag({
type: itemType,
item: () => originalItem,
canDrag,
collect: (monitor: DragSourceMonitor) => ({
opacity: monitor.isDragging() ? 0 : 1,
isDragging: !!monitor.getItem()
})
});
That way the isDragging state will be false whenever no dragging is occurring and true when an item is dragged.
and the hover styles will be applied only when isDragging is false:
<Box
ref={ref}
sx={{
opacity,
...(!isDragging && {
'&:hover': {
borderRadius: '4px',
border: `1px solid blue`
}
})
}}
data-handler-id={handlerId}
>
....
</Box>
Click here for the StackOverflow answer
💖 💪 🙅 🚩
Daniel Bellmas
Posted on September 23, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related