image-zoom-npm

Lightweight React component that opens any image in a fullscreen zoom overlay when clicked, then closes on outside click, close button, or Escape.

Installation

npm install image-zoom-npm
# or
yarn add image-zoom-npm

Quick Start

import { ImageZoom } from 'image-zoom-npm';

export function GalleryCard() {
  return (
    <ImageZoom
      src="/images/thumb.jpg"
      zoomSrc="/images/full.jpg"
      alt="Sample artwork"
    />
  );
}

Component Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | src | string | – | Required thumbnail image source (inherited from img). | | zoomSrc | string | src | High-resolution image shown inside the overlay. | | alt | string | '' | Alt text for the base image. | | zoomAlt | string | alt | Alt text for the zoomed image/dialog label. | | overlayBackground | string | rgba(0, 0, 0, 0.85) | CSS color for the overlay backdrop. | | overlayClassName | string | – | Custom class for the overlay container. | | zoomImageClassName | string | – | Custom class for the zoomed <img>. | | closeButtonClassName | string | – | Custom class for the close button. | | closeOnOutsideClick | boolean | true | Close when clicking the backdrop. | | closeOnEsc | boolean | true | Close when pressing Escape. | | closeLabel | string | Close image | Accessible label for the close button. | | closeButtonContent | ReactNode | '×' | Custom content for the close button. | | ...imgProps | ImgHTMLAttributes | – | All other native <img> props (width, height, etc.). |

Styling Tips

• Override look-and-feel with the provided class name props.
• Use inline styles via style or wrap the component in your layout system.
• The overlay locks body scroll while open; ensure there are no layout shifts by keeping overall page height consistent.

Accessibility

• The overlay renders with role="dialog" and aria-modal="true".
• Set zoomAlt (or alt) to describe the zoomed content.
• Customize closeLabel for localized strings.

Development

npm install
npm run dev   # watch mode with tsup
npm run build # emit dist/ for publishing

License

MIT © 2025