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
$ 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:

Inner Image Zoom Library For React

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

You Might Be Interested In:

Add Comment