{"id":21240241,"url":"https://github.com/retyui/react-quick-pinch-zoom","last_synced_at":"2025-05-14T20:10:16.190Z","repository":{"id":34634904,"uuid":"180784110","full_name":"retyui/react-quick-pinch-zoom","owner":"retyui","description":"A react component that providing multi-touch gestures for zooming and dragging on any DOM element.","archived":false,"fork":false,"pushed_at":"2025-02-16T13:36:41.000Z","size":66531,"stargazers_count":321,"open_issues_count":9,"forks_count":47,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-10T09:53:58.854Z","etag":null,"topics":["pinch-to-zoom","react","react-component","zoom"],"latest_commit_sha":null,"homepage":"https://react-quick-pinch-zoom.netlify.app/","language":"JavaScript","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/retyui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-04-11T12:08:28.000Z","updated_at":"2025-04-24T05:12:46.000Z","dependencies_parsed_at":"2023-01-15T08:15:50.508Z","dependency_job_id":"b0e16763-0d55-40d2-b9fe-3b5d8a715df7","html_url":"https://github.com/retyui/react-quick-pinch-zoom","commit_stats":{"total_commits":104,"total_committers":12,"mean_commits":8.666666666666666,"dds":0.6346153846153846,"last_synced_commit":"468eaaeb2c98bc0b26ca26b01f82b466546dbdc1"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-quick-pinch-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-quick-pinch-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-quick-pinch-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-quick-pinch-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/retyui","download_url":"https://codeload.github.com/retyui/react-quick-pinch-zoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254219374,"owners_count":22034397,"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":["pinch-to-zoom","react","react-component","zoom"],"created_at":"2024-11-21T00:50:02.719Z","updated_at":"2025-05-14T20:10:16.172Z","avatar_url":"https://github.com/retyui.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-quick-pinch-zoom\n\n[![react-quick-pinch-zoom on npm](https://img.shields.io/npm/v/react-quick-pinch-zoom.svg)](https://www.npmjs.com/package/react-quick-pinch-zoom)\n[![npm downloads](https://img.shields.io/npm/dm/react-quick-pinch-zoom.svg)](https://www.npmtrends.com/react-quick-pinch-zoom)\n[![react-quick-pinch-zoom install size](https://packagephobia.com/badge?p=react-quick-pinch-zoom)](https://packagephobia.com/result?p=react-quick-pinch-zoom)\n[![Code quality](https://github.com/retyui/react-quick-pinch-zoom/actions/workflows/nodejs.yml/badge.svg)](https://github.com/retyui/react-quick-pinch-zoom/actions/workflows/nodejs.yml)\n\nA react component that lets you zooming and dragging on any DOM element using multi-touch gestures on mobile devices\nand mouse-events\\wheel on desktop devices.\nBased on this module [manuelstofer/pinchzoom](https://github.com/manuelstofer/pinchzoom)\n\n### Component features:\n\n- 🔮 Simple. Easy to use;\n- 🍎 It works with mobile touch gestures and desktop mouse events;\n- ⚡ Fast, 60 FPS on mobile devices.\n\n## Links\n\n- [API documentation](docs/api/README.md)\n- [Web demos](https://react-quick-pinch-zoom.netlify.app/)\n\n## Install\n\n```bash\nnpm i --save react-quick-pinch-zoom\n```\nor\n```bash\nyarn add react-quick-pinch-zoom\n```\n\n## Screenshots\n\n[![](https://github.com/retyui/react-quick-pinch-zoom/blob/master/docs/img/demo.gif?raw=true)](https://media.giphy.com/media/ggJk8Rmysy6TcKJj5K/giphy.mp4)\n\n[Video...](https://media.giphy.com/media/ggJk8Rmysy6TcKJj5K/giphy.mp4)\n\n## Usage\n\n```jsx harmony\nimport React, { useCallback, useRef } from \"react\";\nimport QuickPinchZoom, { make3dTransformValue } from \"react-quick-pinch-zoom\";\n\nconst IMG_URL =\n  \"https://user-images.githubusercontent.com/4661784/\" +\n  \"56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png\";\n\nexport const App = () =\u003e {\n  const imgRef = useRef();\n  const onUpdate = useCallback(({ x, y, scale }) =\u003e {\n    const { current: img } = imgRef;\n\n    if (img) {\n      const value = make3dTransformValue({ x, y, scale });\n\n      img.style.setProperty(\"transform\", value);\n    }\n  }, []);\n\n  return (\n    \u003cQuickPinchZoom onUpdate={onUpdate}\u003e\n      \u003cimg ref={imgRef} src={IMG_URL} /\u003e\n    \u003c/QuickPinchZoom\u003e\n  );\n};\n```\n\n## License\n\nMIT © [retyui](https://github.com/retyui)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretyui%2Freact-quick-pinch-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fretyui%2Freact-quick-pinch-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretyui%2Freact-quick-pinch-zoom/lists"}