react-dnd

Question 1

what helps. react-dnd interact with dom

Answer 1

monitors: it is the way, react-dnd collects information what is happening

react-dnd creates state from events noted in monitor

Question 2

how react-dnd give data to react components

Answer 2

collector function

react component gets props through collector function which convert Dnd state into props

Question 3

what is a backend in react-dnd, types

Answer 3

backend is an abstraction over the dom, which outputs information about what drag and drop events are happening in the dom.

there are two types: 1. html-backend 2. touch-backend 3. Test: supports testing dnd interactions

Question 4

drag sources

Answer 4

they are draggable component
carries information

Question 5

drop targets

Answer 5

accept draggables
can execute functions based on events

Question 6

how to convert a component into draggable

Answer 6

useDrag hook, it accepts, {item, collect} as props

it wires the component into a drag source

Question 7

return value of useDrag hook

Answer 7

1. ref to be attached to drag source
2. collected props
3. drag preview elements Ref: A connector function for the drag preview. This may be attached to the preview portion of the DOM