Convert to Hooks #8
Conversation
|
this is great! I'm glad you simplified the dependencies as it makes the example easier to understand. I think at the time I had just copied over some boilerplate App code that I was using. I'm going to pull this down and give the code a look over. I think it's definitely worth merging this in and doing away with the old stuff :) |
|
Nice! |
| }, | ||
| }) | ||
|
|
||
| const [{}, dragRef] = useDrag({ |
There was a problem hiding this comment.
pull out a preview ref here so we can set the previewing component: const [{}, dragRef, previewRef]
There was a problem hiding this comment.
Interesting, so there exists the ability to show custom preview components? Nice!
There was a problem hiding this comment.
Also, maybe we can remove the {} here, because eslint is complaining on those lines.
So it will become const [, dragRef, previewRef] = ...
There was a problem hiding this comment.
The official react-dnd docs didn't seem to have any info about previewRef thing in the useDrag...
But yeah, that's awesome that we can specify that!
There was a problem hiding this comment.
🤷 yeah, i'm not sure why the docs are lacking this. I found a codesandbox example using it.
|
|
||
| return ( | ||
| <div ref={dropRef}> | ||
| <div |
There was a problem hiding this comment.
then use that previewRef here:
<div ref={dropRef}>
<div ref={previewRef}>
<div ref={dragRef}>..</div>
<Tree ... />
</div>
</div>
This makes it so the Tree attached to the node you are dragging is a part of the drag preview
|
This seems to be older, but I do wanna say that this worked great when I was trying to build the nested list for react-dnd. This is my code: |
Changes:
Packages:
eslint+prettier(for code formatting);reactandreact-dom;stylus(was throwing an error in the current version) andredux;The packages were changed because of personal preferences so it can be discussed, for sure :)