react-instagram-zoom

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

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

Install

npm install --save react-instagram-zoom

Demo

• Open this CodeSandbox example in mobile to try it:

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