Skip to main content

Getting Started

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
  • Event handlers for zoom and load events
  • TypeScript support

Install​

npm install react-iv-viewer

Import its style​

// Import css
import 'react-iv-viewer/dist/react-iv-viewer.css';

You can choose to import css file inside your scss/less files.

Usage​

Image Viewer​

If you just want to add zoom and pan gesture to your images in a image-viewer style, you can use ImageViewer in image mode.

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

Fullscreen Image Viewer​

If you want to show images in full screen, with predefined styles. You can use FullScreenImageViewer.

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