https://github.com/filipchalupa/react-use-drag

Drag interactions made easier.
https://github.com/filipchalupa/react-use-drag

Last synced: 20 days ago
JSON representation

Drag interactions made easier.

• Host: GitHub
• URL: https://github.com/filipchalupa/react-use-drag
• Owner: FilipChalupa
• Created: 2023-12-22T14:26:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-16T10:26:37.000Z (9 months ago)
• Last Synced: 2024-11-03T05:24:07.725Z (6 months ago)
• Language: TypeScript
• Size: 734 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React use drag [![npm](https://img.shields.io/npm/v/react-use-drag.svg)](https://www.npmjs.com/package/react-use-drag) ![npm type definitions](https://img.shields.io/npm/types/react-use-drag.svg)

Drag interactions made easier. Try interactive [CodeSandbox demo](https://codesandbox.io/p/sandbox/react-use-drag-trjpqp?file=%2Fsrc%2FApp.js).

![UI example](https://raw.githubusercontent.com/FilipChalupa/react-use-drag/HEAD/screencast.gif)

## Installation

```bash

npm install react-use-drag

```

## How to use

```jsx

import { useDrag } from 'react-use-drag'

const App = () => {

	const [position, setPosition] = useState({ x: 0, y: 0 })

	const [positionOffset, setPositionOffset] = useState({ x: 0, y: 0 })

	const onRelativePositionChange = useCallback((x, y) => {

		setPositionOffset({ x, y })

	}, [])

	const onStart = useCallback(() => {

		console.log('Dragging has started')

	}, [])

	const onEnd = useCallback((x, y) => {

		setPosition((position) => ({

			x: position.x + x,

			y: position.y + y,

		}))

		setPositionOffset({ x: 0, y: 0 })

	}, [])

	const { elementProps, isMoving } = useDrag({

		onRelativePositionChange,

		onStart,

		onEnd,

	})

	return (

		

			{isMoving ? '🚶' : '🧍'}

		

	)

}

```