Skip to content

idonotknowwhoiam/react-instagram-zoom

 
 

Repository files navigation

react-instagram-zoom

React component that implements Instagram-like zoom for mobile. No dependencies.

Same module is available for angular here: ngx-instagram-zoom

NPM JavaScript Style Guide

Install

npm install --save react-instagram-zoom

Demo

  • Open this CodeSandbox example in mobile to try it:

https://codesandbox.io/s/react-instagram-zoom-7c1wl

Usage

  • Wrap anything you want to make zoomable with <Zoomable></Zoomable> tags.
  • It can zoom in any content (not only images) that css transform can be applied to.
<Zoomable>
    <img
      src="https://github.com/AlexSapoznikov/react-instagram-zoom/blob/master/example/public/cat.png?raw=true"
      alt="Cat"
    />
</Zoomable>

Docs

Props Type Default Description
releaseAnimationTimeout number 500 Animation speed for restoring original size of the image when user lifts up fingers.
maxScale number Number.MAX_SAFE_INTEGER Max zoom. For example value of 1 won't allow zooming in, value of 2 allows to zoom up to 100%.
zIndex number Number.MAX_SAFE_INTEGER z-index that is applied when zooming in.
style object {} Allows to add style to Zoomable component.
className string undefined Allows to add className to Zoomable component

Events

onReleaseAnimationStart TouchEvent undefined Event when release animation starts
onReleaseAnimationEnd TouchEvent undefined Event when release animation ends
onTouchStart TouchEvent undefined Event when touch starts
onTouchMove TouchEvent undefined Event when touch is in process
onTouchEnd TouchEvent undefined Event when touch ends

License

MIT © https://github.com/AlexSapoznikov/react-instagram-zoom

About

Instagram-like zoom for react

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 83.3%
  • HTML 16.7%