A React component that allows you to zoom in on an image, as well as pan the image for a better look.
Install from npm:
npm i dha-zoomable-image
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. |
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;