react-prismazoom

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.

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

Installation

Install the component

$ npm i -D react-prismazoom

Install the example project

This project includes a full-featured application example.

First clone the project.

Then, install it:

$ npm i

Run the Webpack Dev Server:

$ npm run start

Go to http://localhost:1664.

Note: sources of this example can be found in example/src.

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

Name	Type	Default	Description
className	string	None	Class name to apply on the zoom wrapper.
style	object	None	Style to apply on the zoom wrapper. Note that transform, transition, cursor and touch-action cannot be overridden. Example: style={{backgroundColor: red}}.
minZoom	number	1	Minimum zoom ratio.
maxZoom	number	5	Maximum zoom ratio.
scrollVelocity	number	0.1	Zoom increment or decrement on each scroll wheel detection.
onZoomChange	function	null	Function called each time the zoom value changes.
leftBoundary	number	0	Left screen-relative boundary, used to limit panning zone.
rightBoundary	number	0	Right screen-relative boundary, used to limit panning zone.
topBoundary	number	0	Top screen-relative boundary, used to limit panning zone.
bottomBoundary	number	0	Bottom screen-relative boundary, used to limit panning zone.
animDuration	number	0.25	Animation duration (in seconds).

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.

Changelog

[1.0.1] - 2018-08-08

• Improve README documentation
• Add code documentation
• Add NPM and GitLab CI config files
• Add License
• Add animation duration in props
• Add zoom in and out buttons in example project