Inner Image Zoom Library For React


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


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


Inner Image Zoom Library For React

Add Comment