react-image-diff

Zero-dependency React component providing different modes for diffing or comparing images. The image format is the same as that generated by jest-image-snapshot, a three part image with the order old-diff-new. All styles are inline for maximum portability.

Four image comparison modes

$3

Drag a handle to view a split of old vs new

!split

$3

Using a native input slider, fade the new image over the old

!blend

$3

Show the diff image directly

!pixel diff

$3

Display both image side-by-size

!side-by-side

Configuration

$3

Generate a magenta overlay to highlight small changes.

!overlay

$3

By default the component will responsively fit the image into the container size. Set showFullSize to true to display the image at its full size.

!full size

$3

Defaults to true. Shows an orange divider line between the old and new images in split mode. Set to false to hide.

!no divider

$3

Defaults to false. Adds padding around the images with a standard checkerboard pattern. Makes it easier to see the edges of the images.

!padding

Building

``sh
npm run build
`

Demo

Since ImageDiff does not include any configuration controls, the demo is a simple showcase of the modes and options.

`sh
npm run demo:watch


another terminal

npm run demo:serve

open http://localhost:3000

``