React-dnd: How to tell when NOT hovering a drop target

Created on 22 Jan 2016  ·  2Comments  ·  Source: react-dnd/react-dnd

I'm trying to fire off redux actions that help track various DnD states globally. I need to know if dragging is happening and what type of target (ideally exactly which target) is being hovered. Detecting dragging is easy enough using the Source's spec, but I can't figure out how to detect hovering on a target. It has the 'hover' method in the spec, but that fires continuously, and as far as I can tell there isn't a way to tell when the hover stops. I could use timeouts but that seems less than ideal. I had thought to wrap the main app area in a dropTarget and use 'shallow' checking, but that doesn't give info about what type of drop target is being hovered. I suspect theres some way I could exploit the DnD Context but haven't dug in that far.

question

Most helpful comment

You can use componentWillReceiveProps lifecycle methods and fire an action when nextProps.isOver !== this.props.isOver. You’d need to add isOver: monitor.isOver() to your DropTarget’s collect() function.

All 2 comments

Might be able to bind my own onDrag* events to do what I need. Adds a slight interdependence between my app code and react-dnd, in terms of assumptions about which drag backend I'm using. But probably fine.

You can use componentWillReceiveProps lifecycle methods and fire an action when nextProps.isOver !== this.props.isOver. You’d need to add isOver: monitor.isOver() to your DropTarget’s collect() function.

Was this page helpful?
0 / 5 - 0 ratings