Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
useDrop: hover(item, monitor) - item is dragged item, not hovered item
See original GitHub issueI’m attempting to port to the useDrop hook from DropTarget.
In DropTarget the hover(props, monitor, component) props argument is the item properties of the item being hovered.
In useDrop: hover(item, monitor) both the item and monitor arguments are the dragged item?
Is there any way to get the properties of the item being hovered? Additionally, is there any way to get the component of the item being hovered? I need to calculate its position/dimensions.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6
Top Results From Across the Web
react-dnd monitor.getItem() is always equal to hovered item
The first parameter of the hover method is the dragging item, not the hovered item. The hovered item is the current item which...
Read more >useDrop - React DnD
Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true }) to test whether the hover happens over...
Read more >How to use the react-dnd.useDrop function in react-dnd | Snyk
Use Snyk Code to scan source code in minutes - no build needed - and fix issues ... onHover(item, props); } } });...
Read more >DropTarget - React-dnd - Breword 文档集合
Wrap your component with DropTarget to make it react to the compatible items being dragged, hovered, or dropped on it. DropTarget is a...
Read more >Draggable elements with React-dnd - The Widlarz Group
React-dnd uses items, types, and monitors to help you with work on ... Let's add a console log to useDrop hook, and connect...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
ref.currentwas the key! Thank you!Have a look at their sortable example, it also uses the useDrop hook: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed