React Components

@blazediff/react renders a before/after comparison four ways: swipe, two-up, onion skin, and a live pixel diff. Every demo below is the real component, running in this page.

The components carry no styling of their own. They take *ClassName props and render from the @blazediff/ui headless engine, so you can restyle them freely or drop to the engine and render your own markup.

Installation


npm install @blazediff/react


pnpm add @blazediff/react


yarn add @blazediff/react


bun add @blazediff/react

SwipeMode


import { SwipeMode } from "@blazediff/react";
 
// A draggable divider over two stacked images. position is 0 to 100.
<SwipeMode
  src1="before.png"
  src2="after.png"
  onPositionChange={(position) => console.log(position)}
/>

TwoUpMode


import { TwoUpMode } from "@blazediff/react";
 
// Side by side, with a label when the two images differ in size.
// zoom={3} shows both images magnified under the pointer.
<TwoUpMode
  src1="before.png"
  src2="after.png"
  zoom={3}
  onImagesLoaded={({ image1, image2 }) => console.log(image1, image2)}
/>

OnionSkinMode


import { OnionSkinMode } from "@blazediff/react";
 
// Blends the two images. Good for spotting small position shifts.
<OnionSkinMode
  src1="before.png"
  src2="after.png"
  opacity={50}
  onOpacityChange={(opacity) => console.log(opacity)}
/>

DifferenceMode


import { DifferenceMode } from "@blazediff/react";
 
// Runs an actual pixel diff in the browser and paints the result.
<DifferenceMode
  src1="before.png"
  src2="after.png"
  threshold={0.1}
  onDiffComplete={({ diffCount, percentage }) =>
    console.log(diffCount, percentage)
  }
/>

Not using React? The same four modes ship as vanilla mount functions
Every prop: @blazediff/react reference
The engine underneath: @blazediff/ui reference