@firdaus.lubis/react-image-zoom

Clean-room React + TypeScript image zoom package with a publish-ready API.

What it includes

• hover/focus image magnification
• configurable zoom pane positions: right, left, top, bottom, and original
• typed props for React apps
• ESM + CommonJS bundles with generated .d.ts files

Install

Local sibling usage

pnpm add ../react-image-zoom

After publishing to npm

pnpm add @firdaus.lubis/react-image-zoom

Usage

import ReactImageZoom from '@firdaus.lubis/react-image-zoom';

export function ProductImage() {
  return (
    <ReactImageZoom
      img="https://example.com/product.jpg"
      alt="Product preview"
      zoomPosition="original"
      scale={2.5}
    />
  );
}

Supported props

• img – source URL for the image
• alt – image alt text
• zoomPosition – right | left | top | bottom | original
• scale / zoomScale – magnification factor
• zoomWidth / zoomHeight – zoom pane sizing overrides
• lensSize – magnifier lens size in pixels
• standard image props such as loading, decoding, and crossOrigin

Compatibility notes

This package intentionally uses a clean-room implementation and keeps the familiar default export shape so migration is straightforward.

Scripts

pnpm install
pnpm build
pnpm type-check
pnpm pack:preview