{"id":18569013,"url":"https://github.com/filipchalupa/react-use-drag","last_synced_at":"2026-01-24T06:06:04.919Z","repository":{"id":213707448,"uuid":"734755931","full_name":"FilipChalupa/react-use-drag","owner":"FilipChalupa","description":"Drag interactions made easier.","archived":false,"fork":false,"pushed_at":"2024-08-16T10:26:37.000Z","size":752,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-03T05:24:07.725Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FilipChalupa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-22T14:26:29.000Z","updated_at":"2024-08-16T10:26:41.000Z","dependencies_parsed_at":"2023-12-22T15:33:42.111Z","dependency_job_id":"c14d7533-9270-447d-9200-00ac1639b709","html_url":"https://github.com/FilipChalupa/react-use-drag","commit_stats":null,"previous_names":["filipchalupa/react-use-drag"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilipChalupa%2Freact-use-drag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilipChalupa%2Freact-use-drag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilipChalupa%2Freact-use-drag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilipChalupa%2Freact-use-drag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FilipChalupa","download_url":"https://codeload.github.com/FilipChalupa/react-use-drag/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223427510,"owners_count":17143305,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T22:31:39.418Z","updated_at":"2026-01-24T06:05:59.899Z","avatar_url":"https://github.com/FilipChalupa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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)\n\nDrag interactions made easier. Try interactive [CodeSandbox demo](https://codesandbox.io/p/sandbox/react-use-drag-trjpqp?file=%2Fsrc%2FApp.js).\n\n![UI example](https://raw.githubusercontent.com/FilipChalupa/react-use-drag/HEAD/screencast.gif)\n\n## Installation\n\n```bash\nnpm install react-use-drag\n```\n\n## How to use\n\n```jsx\nimport { useDrag } from 'react-use-drag'\n\nconst App = () =\u003e {\n\tconst [position, setPosition] = useState({ x: 0, y: 0 })\n\tconst [positionOffset, setPositionOffset] = useState({ x: 0, y: 0 })\n\tconst onRelativePositionChange = useCallback((x, y) =\u003e {\n\t\tsetPositionOffset({ x, y })\n\t}, [])\n\tconst onStart = useCallback(() =\u003e {\n\t\tconsole.log('Dragging has started')\n\t}, [])\n\tconst onEnd = useCallback((x, y) =\u003e {\n\t\tsetPosition((position) =\u003e ({\n\t\t\tx: position.x + x,\n\t\t\ty: position.y + y,\n\t\t}))\n\t\tsetPositionOffset({ x: 0, y: 0 })\n\t}, [])\n\tconst { elementProps, isMoving } = useDrag({\n\t\tonRelativePositionChange,\n\t\tonStart,\n\t\tonEnd,\n\t})\n\n\treturn (\n\t\t\u003cbutton\n\t\t\tclassName=\"draggable\"\n\t\t\tstyle={{\n\t\t\t\ttranslate: `translate(${position.x}px ${position.y}px)`,\n\t\t\t}}\n\t\t\t{...elementProps}\n\t\t\u003e\n\t\t\t{isMoving ? '🚶' : '🧍'}\n\t\t\u003c/button\u003e\n\t)\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipchalupa%2Freact-use-drag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilipchalupa%2Freact-use-drag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipchalupa%2Freact-use-drag/lists"}