react-iv-viewer

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

Demos

See the demo of react-iv-viewer. Demo

Install

using npm

npm install react-iv-viewer

using yarn

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

ES6

Image Viewer

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

Fullscreen Viewer

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

Documentation

See full documentation of react-iv-viewer