Before / After Reveal React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import BeforeAfterReveal from "./BeforeAfterReveal";

export default function Example() {
  return (
    <BeforeAfterReveal
      before={"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20700%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.7%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23c5c2ce%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Ccircle%20cx%3D%22390%22%20cy%3D%22190%22%20r%3D%2290%22%20fill%3D%22%23e2dde4%22%2F%3E%3Cpath%20d%3D%22M0%20450Q200%20190%20600%20410V700H0Z%22%20fill%3D%22%23a2a0ae%22%2F%3E%3Cpath%20d%3D%22M0%20520Q380%20300%20600%20490V700H0Z%22%20fill%3D%22%23757481%22%2F%3E%3Cpath%20d%3D%22M0%20650Q250%20400%20600%20620V700H0Z%22%20fill%3D%22%23494853%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.085%22%2F%3E%3C%2Fsvg%3E"}
      after={"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20700%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.7%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23d8ad8c%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Ccircle%20cx%3D%22390%22%20cy%3D%22190%22%20r%3D%2290%22%20fill%3D%22%23f9d7ae%22%2F%3E%3Cpath%20d%3D%22M0%20450Q200%20190%20600%20410V700H0Z%22%20fill%3D%22%23b78461%22%2F%3E%3Cpath%20d%3D%22M0%20520Q380%20300%20600%20490V700H0Z%22%20fill%3D%22%23805848%22%2F%3E%3Cpath%20d%3D%22M0%20650Q250%20400%20600%20620V700H0Z%22%20fill%3D%22%234b3935%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.085%22%2F%3E%3C%2Fsvg%3E"}
      beforeAlt={"Dune illustration in cool monochrome"}
      afterAlt={"Dune illustration in warm colours"}
      beforeLabel={"Original"}
      afterLabel={"Colour study"}
      defaultValue={50}
      height={400}
      borderRadius={18}
      handleColor={"#ffffff"}
    />
  );
}

Using Before / After Reveal

Use two images with matching framing so moving the divider compares the same subject. Provide beforeAlt and afterAlt as well as any visible labels.

Use value with onChange to control the divider externally, or defaultValue to choose its initial position.

Props

Name	Type	Required	Default	Description
before	string	No	""	Left image source URL. The component bundles no image assets.
after	string	No	""	Right image source URL.
beforeAlt	string	No	""	Accessible description of the before image.
afterAlt	string	No	""	Accessible description of the after image.
beforeLabel	string	No	"Before"	Visible label for the left image. Empty strings hide the label.
afterLabel	string	No	"After"	Visible label for the right image.
value	number	No	undefined	Optional controlled divider position, from 0 to 100.
defaultValue	number	No	50	Initial divider percentage when uncontrolled.
onChange	function	No	undefined	Called with the new percentage on pointer or keyboard input.
height	number \| string	No	360	Container height in pixels or a CSS length.
borderRadius	number	No	18	Corner radius in pixels.
handleColor	string	No	"#ffffff"	Divider and handle colour.
label	string	No	"Image comparison"	Accessible label for the native range control.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.