1.1.0 • Published 1 year ago
react-use-drag-and-drop v1.1.0
Overview
This library will help you to drag and drop elements on the web. With a very simple use it is perfect for drag and drop in simple or even complex scenarios.
Install
npm install --save react-use-drag-and-drop
or
yarn add react-use-drag-and-drop
Usage
You need provide the drag and drop context
import { DragAndDropProvider } from 'react-use-drag-and-drop';
<DragAndDropProvider>
...
</DragAndDropProvider>
Now in your component you can use the hooks, first create your draggable component
import { useDrag } from 'react-use-drag-and-drop';
const MyComponentDraggable = () => {
const htmlRef = useRef(null);
//...
const { isDragging, preview } = useDrag({
id,
canDrag: true,
data: { counter },
element: elementToDragRef,
end: (props) => console.log('end', props),
start: (props) => console.log('start', props),
}, [counter, id]);
//...
return <button ref={htmlRef}>Drag button</button>
}
Now you ca create your droppable component
import { useDrop } from 'react-use-drag-and-drop';
const MyComponentDroppable = () => {
const htmlRef = useRef(null);
//...
const [{ isDraggingOver, isDraggingOverCurrent }] = useDrop({
id,
element: elementToDropRef,
drop: (data, monitor) => console.log('drop', data, monitor),
hover: (data, monitor) => console.log('hover', data, monitor),
leave: (data, monitor) => console.log('leave', data, monitor),
}, [id]);
//...
return <div ref={htmlRef}>Drop area div</div>
}
Contribute
- Clone this repository
- Prefer to use yarn for dependency installation
Install the dependencies
yarn install
Run the example in local host
yarn dev
Change
package.json
versionBuild the package
yarn build
Publish the new version
npm publish
1.1.0
1 year ago
1.0.0
1 year ago
1.0.0-beta.2
1 year ago
1.0.0-beta.3
1 year ago
1.0.0-beta.0
1 year ago
1.0.0-beta.1
1 year ago
0.0.2
2 years ago
0.0.1
3 years ago