MediaGenerated from the public API

ImageCompare

Two images and one draggable divider, operable from the keyboard.

@luc/ui

Examples

Default

A real draggable divider with a keyboard path, not a CSS mask.

Drag the handle, or use the arrow keys once it has focus.

<ImageCompare before={before} after={after} label="Before and after processing" />

Usage

import { ImageCompare } from "@luc/ui";

<ImageCompare
  before={{ src: "/raw.jpg", alt: "Raw capture" }}
  after={{ src: "/graded.jpg", alt: "Graded capture" }}
  label="Before and after grading"
/>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`ImageCompare`	9 documented props	`({ before, after, value, defaultValue, onValueChange, label, beforeLabel, afterLabel, aspect, className, ...props }: ImageCompareProps) => import("@types/react").JSX.Element`

ImageCompare props

Type: ImageCompareProps

Values the compiler reads from the declaration.

ImageCompare props
Prop	Type	Default	Notes
`after`	`CompareImage`	`—`	Shown on the right of the wipe.
`afterLabel?`	`string \| undefined`	`—`
`aspect?`	`"video" \| "square" \| "wide" \| undefined`	`—`
`before`	`CompareImage`	`—`	Shown on the left of the wipe.
`beforeLabel?`	`string \| undefined`	`—`
`defaultValue?`	`number \| undefined`	`—`
`label?`	`string \| undefined`	`—`	Accessible name for the slider.
`onValueChange?`	`((value: number) => void) \| undefined`	`—`
`value?`	`number \| undefined`	`—`	0–100. The share of the frame given to `before`.

Guidelines

Write `beforeLabel` and `afterLabel` as what the two images show, not as “before” and “after” alone.
Use it when the comparison is the point — a retouch, a filter, a registration — and show one image where it is not.

Don't

Rely on the slider alone for a reader who cannot use a pointer; the keyboard path is there, and the labels say which side is which.

Accessibility

The divider is a slider with a value, a name and a keyboard path, and both images carry their own `alt`. The two labels are text, so the comparison is readable without dragging anything.