react-tiny-drag-drop v0.1.2
react-tiny-drag-drop
This aims to implement a simple, yet fully functional, drag and drop functionality for React.
Installation
npm install react-tiny-drag-dropUsage
Working example: https://codesandbox.io/s/react-tiny-drag-drop-zg7mr
Usage
import React from 'react';
import {Draggable, Droppable} from "react-tiny-drag-drop";
export function App(props) {
const onDrop((i) => alert(i));
return (
<Droppable context="item" onDrop={onDrop}><div>Drop here...</div></Droppable>
<Draggable context="item" dataKey={1}>Item 1</Draggable>
<Draggable context="item" dataKey={2}>Item 2</Draggable>
);
}\<Draggable> Component
Wrap around any object that should be draggable.
| Property | Type | Description | Default |
| ----------------- |--------- |------------------------------------------------------------------- | ------------------|
| context | string | Use context to pair Draggable and Droppable objects | |
| dataKey | string | Value that will be sent to the Droppable.onDrop() event callback | |
| disabled | boolean | Set to true to disable functionality | false |
| onDragEnd | function | Callback function for onDragEnd events (when dragging stops) | (dataKey) => {} |
\<Droppable> Component
| Property | Type | Description | Default |
|---|---|---|---|
context | string | Use context to pair Draggable and Droppable objects | null |
disabled | boolean | Set to true to disable functionality | false |
onDragOver | function | Callback function for onDragOver events (when any Draggable is dragged over this Droppable) | (dataKey, dataContext, context) => {} |
onDrop | function | Callback function for onDrop events (when a Draggable in the same context is dropped) | (dataKey, context) => {} |
Contribute and build
Contribute to this repository by sending pull requests my way! All help is welcome!
Make sure you have webpack installed on your host machine.
npm run-script buildUse npm link to link to a local frontend react project to be able to modify and test immediately.