React-simple-dnd
This Library is simply a bunch of wrappers around another library: React DnD (by Dan Abramov).
React DnD is a library that implements Drag'nDrop in a “React way”: It doesn't touch the DOM, embraces unidirectional data flow and, most importantly, defines dragging logic as pure data.
React DnD is powerful and flexible enough to support virtually any scenarios involving Drag'nDrop, but all this characteristic have a cost: React DnD requires a lot of boilerplate even for the most simple use cases.
Installing
$ npm install react-simple-dnd
How to Use
There are two elements available: <DragSource>
and <DropTarget>
.
Additionaly, there's the HTML5DragDrop
Higher Order Component that must be wrap the root component of your application and set up the Drag and Drop support.
<DragSource>
Usage
Simple
<DragSource onBeginDrag=thishandleBeginDrag onEndDrag=thishandleEndDrag> <div> Drag Me </div></DragSource>
Function as Children
You can have access to isDragging through function-as-children
<DragSource onBeginDrag=thishandleBeginDrag onEndDrag=thishandleEndDrag> <div className=isDragging && 'drag'> Drag Me </div> </DragSource>
Props
type: Optional. String. Only the drop targets registered for the same type will react to drag source. If not provided, a default value will be assigned.
onBeginDrag: Optional. Function. Called when the dragging starts.
onEndDrag: Optional. Function. Called when the dragging stops.
Important React-DnD defines dragging logic as pure data. All other props passed to drag source will be made available to the DropTarget when dropped.
<DropTarget>
Usage
Simple
<DropTarget onDrop=thishandleDrop> <div> I'm a target. Drop on me. </div></DropTarget>
Function as Children
You can have access to isOver (true if user is dragging a DragSource over this target) through function-as-children
<DropTarget onDrop=thishandleDrop> <div className=isOver && 'drag'> Drag Me </div> </DropTarget>
Props
types: Optional. String or Array of Strings. This drop target will only react to the drag sources of the specified type or types.
onDrop: Optional. Function. Called when the user Drops a Drag source on this target. The "type" and any custom props included on will be passed as args when invoking this function.
canDrop: Optional. Function. Called when the user tries to drop a Drag source on this target. Should return true or false whether the can be dropped in this target. The "type" and any custom props included on will be passed as args when invoking this function.
HTML5DragDrop
Wrap the root component of your application with DragDropContext to set up React DnD. This sets up the shared DnD state behind the scenes.
Usage
; /* ... */ YourApp;