iv-viewer

A zooming and panning plugin inspired by Google Photos for your web images. It comes in two different variants. First, a react-based zooming and panning component and 2nd vanilla JS-based zooming and panning library.

react-iv-viewer

react-iv-viewer is a React-based library for viewing images with advanced features like zooming, high-resolution image support, and full-screen viewing. It provides an easy way to integrate image viewing functionality into your React applications.

Features

Smooth dragging and panning of images
Support for touch devices
Double tap to zoom in/zoom out
Pinch in/out to control zoom
Zooming with mouse wheel or buttons
High-resolution image support
Full-screen image viewing
Customizable viewer dimensions
TypeScript support

Demo

Codesandbox Demo: https://cc5q8h.csb.app/

Install

using npm

npm install react-iv-viewer

using yarn

yarn add react-iv-viewer

ES6

Image Viewer

import { ImageViewer } from 'react-iv-viewer';

Fullscreen Viewer

import { FullScreenImageViewer } from 'react-iv-viewer';

iv-viewer

iv-viewer is a zooming and panning plugin inspired by Google Photos for your web images. It provides a smooth and intuitive way to view images with features like full-screen mode, touch device support, and high-resolution image loading.

Features

Smooth dragging and panning of images
Support for touch devices
Double tap to zoom in/zoom out
Pinch in/out to control zoom
Snap view for better panning and zooming experience
Quick display of loaded images with progressive loading of high-quality images
Exposed API to control zoom programmatically
Custom events to listen for state changes

Install

Using npm

npm install iv-viewer --save

Using yarn

yarn add iv-viewer

Usage

ES6

Image Viewer

import ImageViewer from 'iv-viewer';
import 'iv-viewer/dist/iv-viewer.css';

const container = document.querySelector('#image-container');
const viewer = new ImageViewer(container, options);

viewer.load('images/low-res-img', 'images/hi-res-img');

Fullscreen Viewer

import { FullScreenViewer } from 'iv-viewer';
import 'iv-viewer/dist/iv-viewer.css';

const viewer = new FullScreenViewer(options);

viewer.show('images/low-res-img', 'images/hi-res-img');