dha-zoomable-image

A React component that allows you to zoom in on an image, as well as pan the image for a better look.

Getting Started

Install

Install from npm:

npm i dha-zoomable-image

ZoomImage Component

Props

Name	Type	Default	Description
src	string		The source of the image to be displayed.
alt	string?		The alt text for the image.
imageOptions	ImageOptions?	{ scrollSensitivity: 0.005, maxZoom: 1, minZoom: 0.5 }	The options for the image.

---

ImageOptions

Name	Type	Default	Description
scrollSensitivity	number?	0.005	The sensitivity of the scroll wheel.
maxZoom	number?	1	The maximum zoom level.
minZoom	number?	0.5	The minimum zoom level.

Home.tsx - Functional component

import { ZoomImage } from 'dha-zoomable-image';
import React from 'react';

import Logo from '@/assets/images/<image>.webp';

const Home = () => (
  <>
    <ZoomImage src={Logo} />
  </>
);

export default Home;

Home.tsx - Functional component with options

import { ZoomImage } from 'dha-zoomable-image';
import React from 'react';

import Logo from '@/assets/images/<image>.webp';

const Home = () => (
  <>
    <ZoomImage
      src={Logo}
      imageOptions={{
        scrollSensitivity: 0.01,
        maxZoom: 1.5,
        minZoom: 0.5,
      }}
    />
  </>
);

export default Home;

NPM

https://www.npmjs.com/package/dha-zoomable-image