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