July 31, 2026

Deltaphoto

A small image comparison component for React. Give it two photos and it handles the rest.

Miami skyline during the dayMiami skyline at night
Drag the divider or use "Toggle" to switch views.

I kept needing the same interaction: compare a redesign, show a restoration, explain an edit, or make a visual change obvious without asking someone to flip between two images. The available components worked, but most of them felt like unfinished plumbing rather than something I wanted to put on a page.

So I made the version I wanted to reach for: deliberately small, already designed, and useful without a setup screen full of decisions.

Getting started

The finished API is only two required props. Everything else is an optional refinement for a particular comparison.

DeltaphotoAvailable now on npm.
Terminal
npm install deltaphoto
Example.tsx
import { Deltaphoto } from "deltaphoto";import "deltaphoto/styles.css";<Deltaphoto  before="/room-before.jpg"  after="/room-after.jpg"/>

It fills the width of its parent and keeps a 3:2 aspect ratio by default. The component ships with its interaction styles, so the surrounding layout is entirely yours.

The interaction

The divider is built on a native range input, with a quick toggle control for switching between the two images. That means the same comparison works with a mouse, a finger, a trackpad, and a keyboard instead of maintaining a separate path for each one.

Drag anywhere

The full image is the target, not just the small handle.

Scroll naturally

It's mobile friendly, so it doesn't get in the way of touch screens when trying to scroll.

Keyboard stops

Arrow keys jump cleanly between the start, middle, and end.

Smooth drag

The divider beautifully eases toward where you dragged it.

Quick toggle

Instantly swap between the two images to quickly see the differences.

Making it yours

The defaults are meant to be the version you ship. The options are there for real content differences (labels, framing, and controlled state). Not for rebuilding the component piece by piece.

Try this playground to fill in the details you want to ship with. The codeblock below will update accordingly, so you can copy and paste that into your project.

Miami skyline during the dayMiami skyline at night
Your Deltaphoto.tsx
import { Deltaphoto } from "deltaphoto";import "deltaphoto/styles.css";<Deltaphoto  before="https://www.dannyohana.com/deltaphoto/miami-night.png"  after="https://www.dannyohana.com/deltaphoto/miami-day.png"  beforeAlt="Miami skyline at night"  afterAlt="Miami skyline during the day"  beforeLabel="Night"  afterLabel="Day"  ariaLabel="Compare the Miami skyline at night and during the day"/>

Pass a class name or normal inline styles to the root when the comparison needs a different radius or surrounding treatment. Both images always share the same crop, which keeps the comparison visually honest.

Props

Images

before
string
required
URL for the image shown on the left.
after
string
required
URL for the image shown on the right.

Labels & accessibility

beforeAlt
string
"Before"
Alternative text for the before image.
afterAlt
string
"After"
Alternative text for the after image.
beforeLabel
string
"Before"
Label shown over the before image.
afterLabel
string
"After"
Label shown over the after image.
showLabels
boolean
true
Show or hide both image labels.
ariaLabel
string
comparison description
Accessible name for the range control.

Position & state

initialPosition
number
50
Initial divider position from 0 to 100.
position
number
—
Controlled divider position from 0 to 100.
onPositionChange
function
—
Runs whenever the divider moves.

Appearance

aspectRatio
CSS value
"3 / 2"
Aspect ratio of the comparison surface.
objectFit
CSS value
"cover"
How both images fit inside the surface.
foregroundColor
CSS color
"#000"
Color used for the grip and component text.
backgroundColor
CSS color
"#fff"
Color used for labels, the divider, and the handle.

Integration

className
string
""
Class applied to the root element.

Standard div attributes, including data attributes and event handlers, are passed to the root element.

Package status

Deltaphoto is available as a public npm package for React. Install it with npm install deltaphoto, then import the component and its stylesheet into your app.

This page remains the source of truth for how the component is meant to work.