https://github.com/jackdeadman/use-mouse-drag
A react hook for creating interaction by dragging the mouse e.g., moving elements and drawing boxes
https://github.com/jackdeadman/use-mouse-drag
dragging mouse react react-hooks reactjs
Last synced: 4 months ago
JSON representation
A react hook for creating interaction by dragging the mouse e.g., moving elements and drawing boxes
- Host: GitHub
- URL: https://github.com/jackdeadman/use-mouse-drag
- Owner: jackdeadman
- Created: 2019-11-17T21:38:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:55:19.000Z (about 2 years ago)
- Last Synced: 2025-10-08T17:36:24.243Z (9 months ago)
- Topics: dragging, mouse, react, react-hooks, reactjs
- Language: JavaScript
- Homepage: https://jackdeadman.github.io/use-mouse-drag/
- Size: 690 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-mouse-drag
Examples
- [Demo](https://jackdeadman.github.io/use-mouse-drag/)
- [Sandbox](https://codesandbox.io/s/testing-react-hooks-st63d?fontsize=14)
> A react hook for creating interaction by dragging the mouse e.g., moving elements and drawing boxes
[](https://www.npmjs.com/package/use-mouse-drag) [](https://standardjs.com)
## Install
```bash
npm install --save use-mouse-drag
```
## Basic Usage
```
const { mousePosition, dragging } = useMouseDrag(element, constraints)
```
The mousePosition variable changes whenever the mouse moves. The object contains a start attribute and an end attribute indicating the location of the mouse at the start and the end of dragging. The dragging variable indicates whether or not the mouse is currently down. The `mousePosition.start` is an undefined value when not being dragged, use `mousePosition.end` to get current mousePosition.
Both the parameters passed into the hook are optional, The `element` parameter is the element that will listen for drags and will default to the entire page. The `constraints` parameter is an array of functions, the function gets passed a mousePosition and if any of the functions are false a drag will not begin.
See the Example below to see how it all fits together.
## Example
```jsx
import React, { useRef, useCallback, useState, useEffect } from 'react'
import { useMouseDrag, useChange } from 'use-mouse-drag'
const App = () => {
const [ allowDragging, setAllowDragging ] = useState(true);
const canvasRef = useRef();
const allowDraggingRef = useRef(allowDragging);
const { mousePosition, dragging } = useMouseDrag(canvasRef.current, [
mousePosition => allowDraggingRef.current
]);
useEffect(() => {
allowDraggingRef.current = allowDragging;
}, [ allowDragging ]);
useChange(() => {
// Drag ended
if (!dragging) {
alert('Dragged: ' + JSON.stringify(mousePosition))
}
}, [ dragging ]);
return (
Dragging: { dragging.toString() }
Position: { JSON.stringify(mousePosition) }
setAllowDragging(!allowDragging)}>
Turn dragging { allowDragging ? 'Off' : 'On' }
)
}
export default App
```
## License
MIT © [jackdeadman](https://github.com/jackdeadman)
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).