{"id":25216257,"url":"https://github.com/sylvaindubus/react-prismazoom","last_synced_at":"2025-04-04T20:08:52.964Z","repository":{"id":32835595,"uuid":"143736239","full_name":"sylvaindubus/react-prismazoom","owner":"sylvaindubus","description":" A pan and zoom component for React, using CSS transformations.","archived":false,"fork":false,"pushed_at":"2024-04-26T10:43:57.000Z","size":29501,"stargazers_count":141,"open_issues_count":14,"forks_count":32,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T19:07:47.022Z","etag":null,"topics":["css3","css3-animations","drag","pan","pinch-to-zoom","react","react-component","zoom"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sylvaindubus.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2018-08-06T13:59:01.000Z","updated_at":"2025-03-16T18:19:21.000Z","dependencies_parsed_at":"2023-02-16T19:31:30.382Z","dependency_job_id":"8beb397d-759a-4ef3-bd2a-38da6f5b0eb8","html_url":"https://github.com/sylvaindubus/react-prismazoom","commit_stats":{"total_commits":106,"total_committers":12,"mean_commits":8.833333333333334,"dds":"0.39622641509433965","last_synced_commit":"b3abf6f3394ac724501d983742d4bf0acf8cf21a"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaindubus%2Freact-prismazoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaindubus%2Freact-prismazoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaindubus%2Freact-prismazoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sylvaindubus%2Freact-prismazoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sylvaindubus","download_url":"https://codeload.github.com/sylvaindubus/react-prismazoom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242678,"owners_count":20907134,"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":["css3","css3-animations","drag","pan","pinch-to-zoom","react","react-component","zoom"],"created_at":"2025-02-10T19:17:29.477Z","updated_at":"2025-04-04T20:08:52.933Z","avatar_url":"https://github.com/sylvaindubus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-prismazoom\n\n## About\n\nA pan and zoom component for React, using CSS transformations.\n\nDepends only upon prop-types, react and react-dom modules.  \nWorks on both desktop and mobile.\n\nOnline demo [here!](https://sylvaindubus.github.io/react-prismazoom/)\n\n### Zoom features :mag_right:\n* Zoom with the mouse wheel or a two-finger pinch\n* Zoom using double-click or double-tap\n* Zoom on the selected area and center\n\n### Pan features :point_up_2:\n* Pan with the mouse pointer or with one finger when zoomed-in\n* Intuitive panning depending on available space when zoomed-in\n* Adjusts cursor style to indicate in which direction the element can be moved\n\n## Contribution\n\nIf you want to contribute, feel free to send a merge request or open a discussion. Currently, I just have time to maintain the package, but not enough to make big changes or add important features.\n\nAll contributions would be quite appreciated! 😉\n\nAmong changes I would like to apply:\n~~- Migrate to TypeScript~~\n~~- Transform to a functional component (that could help split the code)~~\n- Make motion logic less dependent to React\n- Replace Enzyme with another testing library\n\n## Breaking changes on v3\n\n* The `locked` prop has been replaced by `allowZoom` and `allowPan` to handle zooming and panning events separately\n\n## Breaking changes on v2\n\n* The package now requires React v16.3 or higher (to use react references)\n* The zoom feature through gestures or the mouse wheel got some improvements to react better with all devices. You may need to adjust the `scrollVelocity` property passed to the component to keep the same effect.\n\n\n## Installation\n\n### Install the component\n\n```bash\n$ npm i -D react-prismazoom\n```\n\n### Install the demo\n\nThis project includes a full-featured application demo.\n\nFirst clone the project.\n\nGo to the subfolder:\n```bash\n$ cd demo\n```\n\nThen, install it:\n\n```bash\n$ npm ci\n```\n\nRun the Webpack Dev Server:\n\n```bash\n$ npm start\n```\n\n### Run unit tests\n\n⚠️ There are no unit tests anymore since the previously used library is deprecated and doesn't support React 18. The current test suite needs to be adapted using a different library.\n\n## Usage\n\n### Implementation\n\n```jsx\nimport PrismaZoom from 'react-prismazoom'\n\n\u003cPrismaZoom\u003e\n  \u003cimg src=\"my-image.png\" /\u003e\n  \u003cp\u003eA text that can be zoomed and dragged\u003c/p\u003e\n\u003c/PrismaZoom\u003e\n```\n\n### Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- |  --- |\n| className | string | None | Class name to apply on the zoom wrapper. |\n| style | object | None | Style to apply on the zoom wrapper. Note that *transform*, *transition*, *cursor*, *touch-action* and *will-change* cannot be overridden. Example: `style={{backgroundColor: 'red'}}`. |\n| minZoom | number | 1 | Minimum zoom ratio. |\n| maxZoom | number | 5 | Maximum zoom ratio. |\n| scrollVelocity | number | 0.1 | Zoom increment or decrement on each scroll wheel detection. |\n| onZoomChange | function | null | Function called each time the zoom value changes. |\n| onPanChange | function | null | Function called each time the posX or posY value changes (aka images was panned). |\n| animDuration | number | 0.25 | Animation duration (in seconds). |\n| doubleTouchMaxDelay | number | 300 | Max delay between two taps to consider a double tap (in milliseconds). |\n| decelerationDuration | number | 750 | Decelerating movement duration after a mouse up or a touch end event (in milliseconds). |\n| allowZoom | boolean | true | Enable or disable zooming in place.\n| allowPan | boolean | true | Enable or disable panning in place.\n| allowTouchEvents | boolean | false | Enables touch event propagation. |\n| allowParentPanning | boolean | false | When enabled, allows the parent element/page to pan with single-finger touch events as long as zoom = 1. |\n| allowWheel | boolean | true | Enable or disable mouse wheel and touchpad zooming in place |\n| ignoredMouseButtons | number[] | [] | Optional array of ignored mouse buttons allows to prevent panning for specific mouse buttons. By default all mouse buttons are enabled. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button#value) |\n\n**Note:** all props are optional.\n\n### Public Methods\n\nThese functions can be called from parent components.\n\n**zoomIn (value)**\n*Increments the zoom with the given value.*\nParam {value: Number} : Zoom value\n\n**zoomOut (value)**\n*Decrements the zoom with the given value.*\nParam {value: Number} : Zoom value\n\n**zoomToZone (relX, relY, relWidth, relHeight)**\n*Zoom in on the specified zone with the given relative coordinates and dimensions.*\nParam {relX: Number}: Relative X position of the zone left-top corner in pixels\nParam {relY: Number}: Relative Y position of the zone left-top corner in pixels\nParam {relWidth: Number}: Zone width in pixels\nParam {relHeight: Number}: Zone height in pixels\n\n**reset ()**\n*Resets the component to its initial state.*\n\n**getZoom ()**\n*Returns the current zoom value.*\nReturn {Number} : Zone value\n\n## License\n\nReact PrismaZoom is licensed under the ISC license. See the LICENSE.md file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvaindubus%2Freact-prismazoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylvaindubus%2Freact-prismazoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvaindubus%2Freact-prismazoom/lists"}