{"id":16920743,"url":"https://github.com/dherault/react-pan-and-zoom","last_synced_at":"2026-01-29T00:06:57.384Z","repository":{"id":248913920,"uuid":"830160803","full_name":"dherault/react-pan-and-zoom","owner":"dherault","description":"A React component to pan and zoom using a trackpad, mouse or touchscreen","archived":false,"fork":false,"pushed_at":"2024-11-11T17:13:41.000Z","size":6122,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T00:46:46.260Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-pan-and-zoom.web.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/dherault.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":"2024-07-17T18:02:51.000Z","updated_at":"2025-01-16T00:04:11.000Z","dependencies_parsed_at":"2024-07-17T22:25:50.748Z","dependency_job_id":"d6c8d9cd-1df8-4cb1-85bf-8ecc03c1b3f5","html_url":"https://github.com/dherault/react-pan-and-zoom","commit_stats":null,"previous_names":["dherault/react-pan-and-zoom"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-pan-and-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-pan-and-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-pan-and-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dherault%2Freact-pan-and-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dherault","download_url":"https://codeload.github.com/dherault/react-pan-and-zoom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248383987,"owners_count":21094650,"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-10-13T19:49:26.560Z","updated_at":"2026-01-29T00:06:57.359Z","avatar_url":"https://github.com/dherault.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React pan and zoom\n\nA React component to pan and zoom using a trackpad, mouse or touchscreen.\n\n## Demo\n\n[Demo](https://react-pan-and-zoom.web.app/).\n\n## Introduction\n\nThis package differs from other packages in that it detects the mouse type and using a trackpad you can pan with two fingers and zoom with a pinch.\n\n## Installation\n\n```bash\nnpm install --save react-pan-and-zoom\n```\n\n## Usage\n\n```jsx\nimport { PanZoomProvider, PanZoom, useSafeGestures } from 'react-pan-and-zoom'\n\nfunction App() {\n  // Disable swiping the history back and forward with two fingers\n  useSafeGestures()\n\n  return (\n    \u003cPanZoomProvider\u003e\n      \u003cPanZoom\u003e\n        Pannable and zoomable content goes here\n      \u003c/PanZoom\u003e\n    \u003c/PanZoomProvider\u003e\n  )\n}\n```\n\nYou can also import a hook called `usePanZoom` to access the pan and zoom state inside `PanZoomProvider`.\n\n## Props\n\n### PanZoomProvider\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| forceMouseType | 'touchpad' or 'touchscreen' or 'mouse' | automatic | Force a mouse type |\n| initialPan | Xy | { x: 0, y: 0 } | The initial pan value |\n| initialZoom | number | 1 | The initial zoom value |\n| isPanBounded | boolean | true | Whether to bound panning  |\n| panBoundPadding | Padding | { top: 0, bottom: 0, left: 0, right: 0 } | Padding for panning |\n| panZoomDelay | number | 300 | The delay in ms for the pan to adjust after a zoom |\n| isZoomBounded | boolean | true | Whether to bound zooming |\n| minZoom | number | 0.5 | The minimum zoom value |\n| maxZoom | number | 2 | The maximum zoom value |\n| zoomStrength | number | 0.05 | The strength factor of the zoom |\n| centerOnMount | boolean | true | Whether to center on mount if the content is smaller than the container |\n| centerOnMountDelay | number | 3 * 1000 / 60 | How long to way on mount before centering the content |\n| onChange | (pan: Xy, zoom: number) =\u003e void | undefined | The callback when the pan or zoom changes |\n\n## PanZoom\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| containerClassName | string | empty string | The class name of the container |\n| containerStyle | CSSProperties | empty object | The style of the container |\n| contentClassName | string | empty string | The class name of the content |\n| contentStyle | CSSProperties | empty object | The style of the content |\n\n## License\n\nMIT License\n\n## Contributing\n\nYes please!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdherault%2Freact-pan-and-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdherault%2Freact-pan-and-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdherault%2Freact-pan-and-zoom/lists"}