{"id":18206634,"url":"https://github.com/retyui/react-fast-pinch-zoom","last_synced_at":"2025-04-02T15:30:40.454Z","repository":{"id":42806941,"uuid":"270319650","full_name":"retyui/react-fast-pinch-zoom","owner":"retyui","description":"React component for pinch zooming DOM elements","archived":false,"fork":false,"pushed_at":"2025-02-19T10:44:38.000Z","size":271,"stargazers_count":1,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T03:35:26.056Z","etag":null,"topics":["drag","gestures","pinch-to-zoom","react","react-component","reactjs","zoom"],"latest_commit_sha":null,"homepage":"https://react-fast-pinch-zoom.netlify.app/","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/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":"2020-06-07T13:46:56.000Z","updated_at":"2023-02-22T21:06:55.000Z","dependencies_parsed_at":"2024-05-02T03:46:50.316Z","dependency_job_id":"a9c5e425-cc53-4872-8f34-ac4cd86af5c1","html_url":"https://github.com/retyui/react-fast-pinch-zoom","commit_stats":{"total_commits":9,"total_committers":2,"mean_commits":4.5,"dds":"0.33333333333333337","last_synced_commit":"f216805a43a6c65b1f800ff88b45b3ff65469262"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-fast-pinch-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-fast-pinch-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-fast-pinch-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retyui%2Freact-fast-pinch-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/retyui","download_url":"https://codeload.github.com/retyui/react-fast-pinch-zoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246774554,"owners_count":20831563,"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":["drag","gestures","pinch-to-zoom","react","react-component","reactjs","zoom"],"created_at":"2024-11-03T12:05:39.090Z","updated_at":"2025-04-02T15:30:40.079Z","avatar_url":"https://github.com/retyui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026#x3C;PinchZoom/\u0026#x3E; - a react component for pinch zooming DOM elements.\n\n[![Code quality](https://github.com/retyui/react-fast-pinch-zoom/actions/workflows/nodejs.yml/badge.svg)](https://github.com/retyui/react-fast-pinch-zoom/actions/workflows/nodejs.yml)\n[![react-fast-pinch-zoom on npm](https://badgen.net/npm/v/react-fast-pinch-zoom)](https://www.npmjs.com/package/react-fast-pinch-zoom)\n[![react-fast-pinch-zoom downloads](https://badgen.net/npm/dm/react-fast-pinch-zoom)](https://www.npmtrends.com/react-fast-pinch-zoom)\n[![react-fast-pinch-zoom bundle size](https://badgen.net/bundlephobia/minzip/react-fast-pinch-zoom)](https://bundlephobia.com/result?p=react-fast-pinch-zoom)\n\nThis is a migration of [GoogleChromeLabs/pinch-zoom](https://github.com/GoogleChromeLabs/pinch-zoom) to React!\n\n## Demo\n\n[Simple image pinch-zoom](https://react-fast-pinch-zoom.netlify.app/). Although you can put any element in `\u003cPinchZoom/\u003e`.\n\n## Usage\n\n```sh\nyarn add pinch-zoom-element\n```\n\n```js\nimport React, { useRef, useCallback } from \"react\";\nimport {\n  PinchZoom,\n  applyCssProperties,\n  getTransform3DValue,\n  getTransform2DValue,\n} from \"react-fast-pinch-zoom\";\n\nconst App = () =\u003e {\n  const ref = useRef(null);\n  const onTransform = useCallback(({ x, y, scale }) =\u003e {\n    // Use CSS Custom Properties (Variables)\n    applyCssProperties(ref.current, { x, y, scale });\n\n    // Or use literal transform value\n    // ref.current.style.setProperty('transform',getTransform3DValue({x,y,scale}));\n    // ref.current.style.setProperty('transform',getTransform2DValue({x,y,scale}));\n  }, []);\n\n  return (\n    \u003cPinchZoom onTransform={onTransform}\u003e\n      \u003cimg\n        ref={ref}\n        alt=\"two black cats look at you\"\n        src=\"https://cdn.glitch.com/d824d0c2-e771-4c9f-9fe2-a66b3ac139c5%2Fcats.jpg\"\n      /\u003e\n    \u003c/PinchZoom\u003e\n  );\n};\n```\n\nNow the above can be pinch-zoomed!\n\n## API\n\n```js\nconst App = () =\u003e {\n  const pinchZoomRef = React.useRef();\n\n  return (\n    \u003cPinchZoom ref={pinchZoomRef}\u003e\n      \u003cimg /\u003e\n    \u003c/PinchZoom\u003e\n  );\n};\n```\n\n### Properties\n\n```js\npinchZoomRef.current.x; // x offset\npinchZoomRef.current.y; // y offset\npinchZoomRef.current.scale; // scale\n```\n\n### Methods\n\nSet the transform. All values are optional.\n\n```js\npinchZoomRef.current.setTransform({\n  scale: 1,\n  x: 0,\n  y: 0,\n});\n```\n\nScale in/out of a particular point.\n\n```js\nconst scale = 2;\n\npinchZoomRef.current.scaleTo(scale, {\n  // Transform origin. Can be a number, or string percent, eg \"50%\"\n  originX: 0,\n  originY: 0,\n  // Should the transform origin be relative to the \"container\", or \"content\"?\n  relativeTo: \"content\",\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretyui%2Freact-fast-pinch-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fretyui%2Freact-fast-pinch-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretyui%2Freact-fast-pinch-zoom/lists"}