React Components

npm install @blazediff/react

pnpm add @blazediff/react

yarn add @blazediff/react

bun add @blazediff/react

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

import { TwoUpMode } from "@blazediff/react";
 
<TwoUpMode
  src1="before.png"
  src2="after.png"
  onImagesLoaded={({ image1, image2 }) => console.log(image1, image2)}
/>

import { OnionSkinMode } from "@blazediff/react";
 
<OnionSkinMode
  src1="before.png"
  src2="after.png"
  opacity={50}
  onOpacityChange={(opacity) => console.log(opacity)}
/>

import { DifferenceMode } from "@blazediff/react";
 
<DifferenceMode
  src1="before.png"
  src2="after.png"
  threshold={0.1}
  onDiffComplete={({ diffCount, percentage }) =>
    console.log(diffCount, percentage)
  }
/>