1.4.0 • Published 2 months ago
dha-zoomable-image v1.4.0
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;