Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cassiozen/react-simple-dnd
Wrappers around React DnD for simplicity and less boilerplate on common use cases.
https://github.com/cassiozen/react-simple-dnd
Last synced: about 2 months ago
JSON representation
Wrappers around React DnD for simplicity and less boilerplate on common use cases.
- Host: GitHub
- URL: https://github.com/cassiozen/react-simple-dnd
- Owner: cassiozen
- Created: 2016-09-15T04:55:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-09-15T06:23:08.000Z (over 8 years ago)
- Last Synced: 2024-10-07T17:18:52.618Z (3 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 30
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-simple-dnd
This Library is simply a bunch of wrappers around another library: [React DnD (by Dan Abramov)](http://gaearon.github.io/react-dnd/).
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 this comes at a cost: React DnD requires a lot of boilerplate even for the most simple use cases.
React-simple-dnd is less flexible, but let you create Drag and Drop interfaces with fewer boilerplate and reduced complexity.
## Installing
```bash
$ npm install react-simple-dnd
```
## How to Use
There are two elements available: `` and ``.
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.
See the [examples](https://github.com/cassiozen/react-simple-dnd/tree/master/examples) for complete usage cases.
### ``
#### Usage
##### Simple
```js
Drag Me
```
##### Function as Children
You can have access to isDragging through function-as-children
```js
{(isDragging) => (
Drag Me
)}
```
#### 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.
### ``
#### Usage
##### Simple
```js
Drop on me.
```
##### Function as Children
You can have access to isOver (true if user is dragging a DragSource over this target) through function-as-children
```js
{(isOver) => (
Drag Me
)}
```
#### 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
```js
import { HTML5DragDrop } from 'react-simple-dnd';
class YourApp {
/* ... */
}
export default HTML5DragDrop(YourApp);
```