Skip to Content
Documentation@blazediff/react

@blazediff/react

React components for high-performance image comparison. Built with TypeScript and optimized for modern React applications.

Installation

npm install @blazediff/react

Features

  • React 16.8+ compatible: Works with hooks and modern React features
  • TypeScript first: Full type safety and IntelliSense
  • Web Components based: Wraps @blazediff/ui components for React
  • Performance focused: Built on top of high-performance web components
  • Accessible: Proper event handling and React patterns

Quick Start

import { SwipeMode } from '@blazediff/react';
 
function App() {
  return (
    <SwipeMode
      src1="/before.jpg"
      src2="/after.jpg"
      onPositionChange={(position) => console.log(position)}
    />
  );
}

API Reference

<SwipeMode />

Interactive swipe component for comparing two images with a draggable divider.

Props

PropTypeDefaultDescription
src1string (required)-URL of the first image
src2string (required)-URL of the second image
alt1string-Alt text for the first image
alt2string-Alt text for the second image
classNamestring-CSS class for the root element
containerClassNamestring-CSS class for the container
image1ClassNamestring-CSS class for the first image
image2ClassNamestring-CSS class for the second image
dividerClassNamestring-CSS class for the divider
onPositionChange(position: number) => void-Callback when divider position changes

<TwoUpMode />

Side-by-side comparison component with dimension information.

Props

PropTypeDefaultDescription
src1string (required)-URL of the first image
src2string (required)-URL of the second image
classNamestring-CSS class for the root element
containerClassNamestring-CSS class for the main container
containerInnerClassNamestring-CSS class for the inner container
panelClassNamestring-CSS class for each panel
imageClassNamestring-CSS class for images
dimensionInfoClassNamestring-CSS class for dimension info text
onImagesLoaded(detail: {image1: {width, height}, image2: {width, height}}) => void-Callback when images load
onLoadError(error: unknown) => void-Callback when loading fails

<OnionSkinMode />

Overlay comparison with opacity control slider.

Props

PropTypeDefaultDescription
src1string (required)-URL of the base image
src2string (required)-URL of the overlay image
opacitynumber-Initial opacity (0-100)
classNamestring-CSS class for the root element
containerClassNamestring-CSS class for the main container
imageContainerClassNamestring-CSS class for image container
imageClassNamestring-CSS class for images
sliderContainerClassNamestring-CSS class for slider container
sliderClassNamestring-CSS class for the slider
sliderLabelClassNamestring-CSS class for slider label
sliderLabelTextstring-Text for the slider label
onOpacityChange(opacity: number) => void-Callback when opacity changes
onImagesLoaded(detail: {image1: {width, height}, image2: {width, height}}) => void-Callback when images load
onLoadError(error: unknown) => void-Callback when loading fails

<DifferenceMode />

Shows pixel differences using the BlazeDiff comparison algorithm.

Props

PropTypeDefaultDescription
src1string (required)-URL of the first image
src2string (required)-URL of the second image
thresholdnumber-Difference threshold (0-1)
includeAAboolean-Include anti-aliased pixels
alphanumber-Opacity of original image
classNamestring-CSS class for the root element
containerClassNamestring-CSS class for the container
canvasClassNamestring-CSS class for the canvas
onDiffComplete(detail: {diffCount, totalPixels, percentage}) => void-Callback on completion
onDiffError(error: unknown) => void-Callback on error
Last updated on
@blazediff/ui