A React component for magnifying an image within its original container. Zoom behavior can be triggered on click or hover and the zoomed image can be moved by dragging on touch devices and either dragging or pan on hover on non-touch devices.
The component supports responsive images, loading placeholders, optional fullscreen zoom on mobile, and more.
How to use it:
1. Installation.
# Yarn $ yarn add react-inner-image-zoom # NPM $ npm i react-inner-image-zoom
2. Import the inner image zoom component.
import InnerImageZoom from 'react-inner-image-zoom'; // stylesheet import 'react-inner-image-zoom/lib/InnerImageZoom/styles.min.css';
3. Add the <InnerImageZoom /> component to the app and define the paths to the original & large images.
<InnerImageZoom src="/path/to/original.jpg" zoomSrc="/path/to/large.jpg" />
4. All available component props.
moveType: PropTypes.string, // pan or drag zoomType: PropTypes.string, // click or hover src: PropTypes.string.isRequired, sources: PropTypes.array, width: PropTypes.number, height: PropTypes.number, hasSpacer: PropTypes.bool, imgAttributes: PropTypes.object, zoomSrc: PropTypes.string, zoomScale: PropTypes.number, zoomPreload: PropTypes.bool, fadeDuration: PropTypes.number, fullscreenOnMobile: PropTypes.bool, mobileBreakpoint: PropTypes.number, hideCloseButton: PropTypes.bool, hideHint: PropTypes.bool, className: PropTypes.string, afterZoomIn: PropTypes.func, afterZoomOut: PropTypes.func
Preview:
Download Details:
Author: laurenashpole
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/laurenashpole/react-inner-image-zoom
License: MIT
