[](https://www.npmjs.com/package/use-draggable-hook) [](https://github.com/dyon21/react-useDraggable-hoo
npm install use-draggable-hook typescript
import useDraggable from 'use-draggable-hook'
function App() {
const { target } = useDraggable()
return (
Draggable element
)
}
`
Try it on Codesandbox:
[Simple example]
[Advanced example].
Interface & Options
`typescript
export type UseDraggable = (
options?: DraggableOptions
) => {
/* target element ref /
target: React.RefObject
/* position state [x, y] /
position: [number, number]
/* function to set a new position value. /
setPosition: (position: [number, number], transition?: string) => void
}
export interface DraggableOptions {
/* use Event.preventDefault with the touchmove events /
prevent?: boolean
/* listen touch events /
touch?: boolean
/* listen mouse events /
mouse?: boolean
/* dragging direction /
direction?: 'vertical' | 'horizontal' | 'both'
/* set css transform /
setCSS?: boolean
/* max dragging distance /
maxDistance?: {
x?: { max?: number; min?: number }
y?: { max?: number; min?: number }
}
/* position step size /
stepSize?:
| number
| {
x: number
y: number
}
/* start callback /
onStart?: (
target: React.RefObject,
position: [number, number],
setPosition: (position: [number, number], transition?: string) => void
) => void
/* move callback /
onMove?: (
target: React.RefObject,
position: [number, number],
setPosition: (position: [number, number], transition?: string) => void
) => void
/* end callback /
onEnd?: (
target: React.RefObject,
position: [number, number],
setPosition: (position: [number, number], transition?: string) => void
) => void
}
const defaultOptions = {
prevent: true,
touch: true,
mouse: true,
direction: 'both',
maxDistance: {
x: { max: Infinity, min: -Infinity },
y: { max: Infinity, min: -Infinity },
},
stepSize: 0,
setCSS: true,
onStart: function () {},
onMove: function () {},
onEnd: function () {},
}
``