React Components

Build interactive image comparison components with React.

Installation


npm install @blazediff/react


pnpm add @blazediff/react


yarn add @blazediff/react


bun add @blazediff/react

Overview

You can find the full source code for the stories below in the GitHub repository .
You can also view the stories in the Storybook .

SwipeMode

https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/react/stories/SwipeMode.stories.tsx


import type { Meta, StoryObj } from "@storybook/react";
import { SwipeMode } from "../src/SwipeMode";
import { FIXTURE_4K_1_A, FIXTURE_4K_1_B } from "./fixtures";
 
const meta: Meta<typeof SwipeMode> = {
	title: "Components/SwipeMode",
	component: SwipeMode,
	args: {
		className: "block",
		dividerClassName: "bg-white/50! w-1!",
	},
	parameters: {
		layout: "centered",
	},
};
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
	args: {
		src1: FIXTURE_4K_1_A,
		src2: FIXTURE_4K_1_B,
		alt1: "Before",
		alt2: "After",
	},
};
 
export const WithCustomAltText: Story = {
	args: {
		src1: FIXTURE_4K_1_A,
		src2: FIXTURE_4K_1_B,
		alt1: "Original",
		alt2: "Modified",
	},
};
 
export const WithPositionChangeHandler: Story = {
	args: {
		src1: FIXTURE_4K_1_A,
		src2: FIXTURE_4K_1_B,
		onPositionChange: (position) => {
			console.log("Divider position:", position);
		},
	},
};```

TwoUpMode

https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/react/stories/TwoUpMode.stories.tsx


import type { Meta, StoryObj } from "@storybook/react";
import { TwoUpMode } from "../src/TwoUpMode";
import { FIXTURE_1_A, FIXTURE_1_B, FIXTURE_2_A } from "./fixtures";
 
const meta: Meta<typeof TwoUpMode> = {
  title: "Components/TwoUpMode",
  component: TwoUpMode,
  parameters: {
    layout: "centered",
  },
  args: {
    containerClassName:
      "flex flex-col-reverse items-center gap-4 bg-gray-200 p-4",
    containerInnerClassName: "flex items-center gap-10",
    panelClassName: "w-80",
  },
};
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
  args: {
    src1: FIXTURE_1_A,
    src2: FIXTURE_1_B,
  },
};
 
export const DifferentSizes: Story = {
  args: {
    src1: FIXTURE_1_A,
    src2: FIXTURE_2_A,
  },
};
 
export const WithEventHandlers: Story = {
  args: {
    src1: FIXTURE_1_A,
    src2: FIXTURE_1_B,
    onImagesLoaded: (detail) => {
      console.log("Images loaded:", detail);
    },
    onLoadError: (error) => {
      console.error("Load error:", error);
    },
  },
};```

OnionSkinMode

https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/react/stories/OnionSkinMode.stories.tsx


import type { Meta, StoryObj } from "@storybook/react";
import { OnionSkinMode } from "../src/OnionSkinMode";
import { FIXTURE_2_A, FIXTURE_2_B } from "./fixtures";
 
const meta: Meta<typeof OnionSkinMode> = {
	title: "Components/OnionSkinMode",
	component: OnionSkinMode,
	parameters: {
		layout: "centered",
	},
	args: {
		containerClassName: "flex flex-col-reverse items-center",
		sliderContainerClassName: "flex items-center gap-2 mb-2",
		imageContainerClassName: "w-80",
		sliderLabelText: "Opacity",
	},
	argTypes: {
		opacity: {
			control: { type: "range", min: 0, max: 100, step: 1 },
		},
	},
};
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
	args: {
		src1: FIXTURE_2_A,
		src2: FIXTURE_2_B,
		opacity: 50,
	},
};
 
export const LowOpacity: Story = {
	args: {
		src1: FIXTURE_2_A,
		src2: FIXTURE_2_B,
		opacity: 20,
	},
};
 
export const HighOpacity: Story = {
	args: {
		src1: FIXTURE_2_A,
		src2: FIXTURE_2_B,
		opacity: 80,
	},
};
 
export const WithEventHandlers: Story = {
	args: {
		src1: FIXTURE_2_A,
		src2: FIXTURE_2_B,
		opacity: 50,
		onOpacityChange: (opacity) => {
			console.log("Opacity changed:", opacity);
		},
		onImagesLoaded: (detail) => {
			console.log("Images loaded:", detail);
		},
		onLoadError: (error) => {
			console.error("Load error:", error);
		},
	},
};```

DifferenceMode

https://raw.githubusercontent.com/teimurjan/blazediff/refs/heads/main/packages/react/stories/DifferenceMode.stories.tsx


import type { Meta, StoryObj } from "@storybook/react";
import { DifferenceMode } from "../src/DifferenceMode";
import { FIXTURE_1_A, FIXTURE_1_B } from "./fixtures";
 
const meta: Meta<typeof DifferenceMode> = {
	title: "Components/DifferenceMode",
	component: DifferenceMode,
	parameters: {
		layout: "centered",
	},
	args: {
		canvasClassName: "w-80",
	},
	argTypes: {
		threshold: {
			control: { type: "range", min: 0, max: 1, step: 0.1 },
		},
		alpha: {
			control: { type: "range", min: 0, max: 1, step: 0.1 },
		},
		includeAA: {
			control: "boolean",
		},
	},
};
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
	args: {
		src1: FIXTURE_1_A,
		src2: FIXTURE_1_B,
		threshold: 0.1,
		includeAA: false,
		alpha: 0.1,
	},
};
 
export const WithEventHandlers: Story = {
	args: {
		src1: FIXTURE_1_A,
		src2: FIXTURE_1_B,
		threshold: 0.1,
		includeAA: false,
		alpha: 0.1,
		onDiffComplete: (detail) => {
			console.log("Diff complete:", detail);
		},
		onDiffError: (error) => {
			console.error("Diff error:", error);
		},
	},
};```