Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-prismazoom

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-prismazoom

A pan and zoom component for React, using CSS transformations.

  • 3.0.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
12K
decreased by-4.87%
Maintainers
1
Weekly downloads
 
Created
Source

react-prismazoom

About

A pan and zoom component for React, using CSS transformations.

Depends only upon prop-types, react and react-dom modules.
Works on both desktop and mobile.

Online demo here!

Zoom features :mag_right:

  • Zoom with the mouse-wheel or a two-finger pinch
  • Zoom using double-click or double-tap
  • Zoom on selected area and center

Pan features :point_up_2:

  • Pan with the mouse pointer or with one finger when zoomed-in
  • Intuitive panning depending on available space when zoomed-in
  • Adjusts cursor style to indicate in which direction the element can be moved

Contribution

If 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.

All contribution would be quite appreciated! 😉

Among changes I would like to apply:

  • Migrate to TypeScript
  • Transform to a functional component (that could help splitting the code)
  • Make motion logic less dependant to React
  • Replace Enzyme with another testing library

Breaking changes on v3

  • The locked prop has been replaced by allowZoom and allowPan to handle zooming and panning events separately

Breaking changes on v2

  • The package now requires React v16.3 or higher (in order to use react references)
  • The zoom feature through gestures or mousewheel got some improvements to react better with all devices. You may need to adjust the scrollVelocity property passed to the component in order to keep the same effect.

Installation

Install the component

$ npm i -D react-prismazoom

Install the demo

This project includes a full-featured application demo.

First clone the project.

Go to the subfolder:

$ cd demo

Then, install it:

$ npm ci

Run the Webpack Dev Server:

$ npm start

Run unit tests

⚠️ There is no unit tests anymore, since the previously used library is deprecated and doesn't support React 18. The current test suite need to be adapted using a different library.

Usage

Implementation

import PrismaZoom from 'react-prismazoom'

<PrismaZoom>
  <img src="my-image.png" />
  <p>A text that can be zoomed and dragged</p>
</PrismaZoom>

Props

NameTypeDefaultDescription
classNamestringNoneClass name to apply on the zoom wrapper.
styleobjectNoneStyle to apply on the zoom wrapper. Note that transform, transition, cursor, touch-action and will-change cannot be overridden. Example: style={{backgroundColor: 'red'}}.
minZoomnumber1Minimum zoom ratio.
maxZoomnumber5Maximum zoom ratio.
scrollVelocitynumber0.1Zoom increment or decrement on each scroll wheel detection.
onZoomChangefunctionnullFunction called each time the zoom value changes.
onPanChangefunctionnullFunction called each time the posX or posY value changes (aka images was panned).
animDurationnumber0.25Animation duration (in seconds).
doubleTouchMaxDelaynumber300Max delay between two taps to consider a double tap (in milliseconds).
decelerationDurationnumber750Decelerating movement duration after a mouse up or a touch end event (in milliseconds).
allowZoombooleantrueEnable or disable zooming in place.
allowPanbooleantrueEnable or disable panning in place.
allowTouchEventsbooleanfalseEnables touch event propagation.

Note: all props are optional.

Public methods

These functions can be called from parent components.

zoomIn (value)
Increments the zoom with the given value.
Param {value: Number} : Zoom value

zoomOut (value)
Decrements the zoom with the given value.
Param {value: Number} : Zoom value

zoomToZone (relX, relY, relWidth, relHeight)
Zoom-in on the specified zone with the given relative coordinates and dimensions.
Param {relX: Number} : Relative X position of the zone left-top corner in pixels
Param {relY: Number} : Relative Y position of the zone left-top corner in pixels
Param {relWidth: Number} : Zone width in pixels
Param {relHeight: Number} : Zone height in pixels

reset ()
Resets the component to its initial state.

getZoom ()
Returns the current zoom value.
Return {Number} : Zone value

License

React PrismaZoom is licensed under the ISC license. See the LICENSE.md file for more details.

Keywords

FAQs

Package last updated on 08 May 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc