React-dnd

Playing around series

• Drag and drop is hard to implement properly and HTML5 standards are inconsistent. 😫
• React-dnd makes it simple yet very capable to make dnd interactions in react pages. 👍🏻
• It's the best way to implement general use dnd in React. 🔥

• It's a high order abstraction over dnd methods in browser that is made for react apps.
• It can support different 'backend' structures like touch and html5

The basic structure

DOM

REACT

VDOM

• HTML5: Support HTML5 DnD events
• Touch: Support touch events on touch devices
• Test: Supports testing DnD interactions.

• The Source of identity in your DnD interactions
• They specify what can be dropped on what.
• They carry information about the dragged item that will be used to finish the drop interaction.

• Communicate to your components what's happening on the DOM side from DnD events
• Passed into react as context.

• Functions to turn DnD events, coming from monitor, into react props. 'Collecting' Props.

• Your draggable components.
• Carry information to be passed onto drop targets.

• Accept certain types of draggable sources

Subscribe for more!

Shehata@msmo.io

github.com/ms-mousa