@lizhogn/image-sync-diff

A powerful React image comparison component with Split, Swipe, Mixup modes, and Deep Zoom support.

View Modes

| Side-by-Side (Split) | Swipe Mode | | -------------------- | ---------- | | | | | Strictly synced zoom & pan | Interactive peel slider |

| Mixup (Overlay) | Single View | | --------------- | ------------------ | | | | | Opacity blending | Quick toggle between versions |

Difference (Delta)

Pixel-level difference highlight

Features

• 🖼️ 4 View Modes:
  • Split: Side-by-side comparison with synced zoom/pan
  • Swipe: Interactive slider to peel between layers
  • Mixup: Overlay blending with opacity control
  • Single: One-tap toggle between images
• 🔍 Deep Zoom: Powered by OpenSeadragon for gigapixel image support
• ⚡ High Performance:
  • Web Worker powered difference calculation
  • Canvas-based rendering
  • Tiled image loading optimization
• 🎨 Theming: Light/Dark mode support (system detection available)
• 🛠️ Fully Configurable: Extensive props for UI customization and callbacks

Installation

npm install @lizhogn/image-sync-diff
# or
yarn add @lizhogn/image-sync-diff
# or
pnpm add @lizhogn/image-sync-diff

Basic Usage

import { ImageDiff } from '@lizhogn/image-sync-diff'
import '@lizhogn/image-sync-diff/dist/style.css' // Import styles if needed (depending on build)

function App() {
  return (
    <div style={{ height: '600px' }}>
      <ImageDiff
        baseImage="https://example.com/base.jpg"
        resultImage="https://example.com/result.jpg"
        baseLabel="Original"
        resultLabel="Processed"
      />
    </div>
  )
}

Note: This component uses Tailwind CSS classes internally. If your project uses Tailwind, it should work out of the box. If not, the styles are bundled (check dist/style.css if exported).

Props API

| Prop | Type | Default | Description | |------|------|---------|-------------| | baseImage | string | Required | URL of the base image | | resultImage | string | Required | URL of the result image | | defaultViewMode | 'single' \| 'split' \| 'swipe' \| 'mixup' | 'split' | Initial view mode | | defaultDiffEnabled | boolean | false | Initial diff mode state | | theme | 'light' \| 'dark' \| 'system' | 'light' | Color theme | | hideToolbar | boolean | false | Hide the bottom toolbar | | disableZoomDisplay | boolean | false | Hide zoom percentage in toolbar | | onViewportChange | (state) => void | - | Callback on zoom/pan | | onViewModeChange | (mode) => void | - | Callback on mode switch |

Contributing

Pull requests are welcome!

License

MIT