react-use-drag 0.1.1 → 0.1.2

package/README.md

@@ -1,6 +1,6 @@
 # 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/s/react-use-drag?file=/src/App.js).
+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)
 
@@ -16,10 +16,37 @@ npm install react-use-drag
 import { useDrag } from 'react-use-drag'
 
 const App = () => {
-	const drag = useDrag()
-
-	// @TODO
-
-	return <button>Drag me</button>
+	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 (
+		<button
+			className="draggable"
+			style={{
+				translate: `translate(${position.x}px ${position.y}px)`,
+			}}
+			{...elementProps}
+		>
+			{isMoving ? '🚶' : '🧍'}
+		</button>
+	)
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-use-drag",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"description": "Drag interactions made easier.",
 	"type": "module",
 	"main": "./dist/index.cjs",