https://github.com/mohebifar/react-native-easy-dnd
Drag and drop with react-native made simple
https://github.com/mohebifar/react-native-easy-dnd
drag-and-drop react-native
Last synced: 3 months ago
JSON representation
Drag and drop with react-native made simple
- Host: GitHub
- URL: https://github.com/mohebifar/react-native-easy-dnd
- Owner: mohebifar
- License: mit
- Created: 2019-08-04T15:54:33.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:15:26.000Z (over 2 years ago)
- Last Synced: 2024-10-10T22:15:21.662Z (9 months ago)
- Topics: drag-and-drop, react-native
- Language: TypeScript
- Size: 944 KB
- Stars: 128
- Watchers: 4
- Forks: 23
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-easy-dnd ★39 - Drag and drop component for react-native (Components / UI)
- awesome-react-native - react-native-easy-dnd ★39 - Drag and drop component for react-native (Components / UI)
README
[](https://travis-ci.org/mohebifar/react-native-easy-dnd)
[](https://www.npmjs.com/package/react-native-easy-dnd)
[](http://opensource.org/licenses/MIT)
# Installation
```
npm install --save react-native-easy-dnd
# or using yarn
yarn add react-native-easy-dnd
```
# Usage
First, you need to import `createDndContext`. This function creates the context for storing the data for the draggable and droppable child components.
```js
import { createDndContext } from "react-native-easy-dnd";
const { Provider, Droppable, Draggable } = createDndContext();
```
## Provider
Wrap the part of your application that you want to enable drag and drop for inside `Provider`.
```jsx
{/* */}
```
## Draggable
Add a `Draggable` component with a function as a child. The element that you want to make draggable needs to be `Animated.View` whose props must extend `viewProps` passed in by the render prop function.
```jsx
import {Animated} from 'react-native';
// ...
{
console.log('Started draggging');
}}
onDragEnd={() => {
console.log('Ended draggging');
}}
payload="my-draggable-item"
>
{({ viewProps }) => {
return (
Drag me
);
}}
```
### Props
| Prop | Type | Description |
| ------------- | ---------- | ------------- |
| `onDragStart` | `Function` | Callback that is triggerd when user starts dragging the draggable element |
| `onDragStart` | `Function` | Callback that is triggerd when user ends dragging the draggable element |
| `payload` | `any` | An arbitrary value (often) unique to this draggable that can later be used to determine which draggable item was dropped onto a droppable |
## Droppable
Add a `Droppable` component with a function as a child. Similarly, the element that you want to make droppable needs to be `Animated.View` whose props must extend `viewProps` passed in by the render prop function.
```jsx
import {Animated} from 'react-native';
// ...
{
console.log('Draggable entered');
}}
onLeave={() => {
console.log('Draggable left');
}}
onDrop={({ payload }) => {
console.log('Draggable with the following payload was dropped', payload);
}}
>
{({ active, viewProps }) => {
return (
Drop here
);
}}
```
### Props
| Prop | Type | Description |
| ------------- | ---------- | ------------- |
| `onEnter` | `Function` | Callback that is triggerd when a draggable enters the droppable area |
| `onLeave` | `Function` | Callback that is triggerd when a draggable leaves the droppable area |
| `onDrop` | `Function` | Callback that is triggerd when a draggable is dropped onto the droppable area |
# Fun Fact!
I wrote most of the code on a flight from Toronto to St. John's in March 2019. ✈
# License
Licensed under the [MIT License](https://github.com/mohebifar/react-native-easy-dnd/blob/master/LICENSE), Copyright © 2019 Mohamad Mohebifar.