React components for blazediff image comparison
npm install @blazediff/reactReact components for blazediff image comparison.


``bash`
npm install @blazediff/react
`tsx
import { DifferenceMode, SwipeMode, TwoUpMode, OnionSkinMode } from '@blazediff/react';
// Difference Mode - Shows pixel differences
src2="image2.png"
threshold={0.1}
includeAA={false}
alpha={0.1}
onDiffComplete={(detail) => console.log('Diff:', detail)}
/>
// Swipe Mode - Interactive slider comparison
src2="image2.png"
alt1="Before"
alt2="After"
onPositionChange={(position) => console.log('Position:', position)}
/>
// Two-Up Mode - Side-by-side comparison
src2="image2.png"
onImagesLoaded={(detail) => console.log('Loaded:', detail)}
/>
// Onion Skin Mode - Overlay with opacity control
src2="image2.png"
opacity={50}
onOpacityChange={(opacity) => console.log('Opacity:', opacity)}
/>
`
Highlights pixel differences between two images using the blazediff algorithm.
Props:
- src1 (string): URL of the first imagesrc2
- (string): URL of the second imagethreshold
- (number): Matching threshold (0-1, default: 0.1)includeAA
- (boolean): Include anti-aliasing in diff (default: false)alpha
- (number): Blending factor for unchanged pixels (0-1, default: 0.1)onDiffComplete
- (function): Callback when diff calculation completesonDiffError
- (function): Callback when an error occurs
Interactive slider to compare two images.
Props:
- src1 (string): URL of the first imagesrc2
- (string): URL of the second imagealt1
- (string): Alt text for first image (default: "Before")alt2
- (string): Alt text for second image (default: "After")onPositionChange
- (function): Callback when slider position changes
Side-by-side image comparison with dimension change detection.
Props:
- src1 (string): URL of the first imagesrc2
- (string): URL of the second imageonImagesLoaded
- (function): Callback when images are loadedonLoadError
- (function): Callback when loading fails
Overlay images with adjustable opacity.
Props:
- src1 (string): URL of the first imagesrc2
- (string): URL of the second imageopacity
- (number): Initial opacity (0-100, default: 50)onOpacityChange
- (function): Callback when opacity changesonImagesLoaded
- (function): Callback when images are loadedonLoadError
- (function): Callback when loading fails
All components accept className props for styling:
`tsx``
src2="image2.png"
className="my-diff-component"
containerClassName="my-container"
canvasClassName="my-canvas"
/>