React Mask Editor

A drop-in component to add simple image mask editing to your React application. Uses <canvas> for rendering & interaction, with optional support for customizing how the mask is displayed & edited.

Online demo & documentation

Wait, what do you mean by "mask editor"?

You give React Mask Editor an image, and it lets the user 'scribble' over that image to create a 1-bit (black or white) mask. Think Photoshop, Lightroom, or Aperture.

Quick Start

First, some setup:

• Add to your dependencies with yarn install react-mask-editor
• Import with import { MaskEditor, toMask } from "react-mask-editor";
• Include node_modules/react-mask-editor/dist/style.css somewhere in your bundle.

Usage:

  const MyComponent: React.FC<{}> = () => {
    const canvas = React.useRef<HTMLCanvasElement>();

    return <>
      <MaskEditor
        src="https://placekitten/256/256"
        canvasRef={canvas}
      />
      <button
        onClick={() => console.log(toMask(canvas.current))}
      >
        Get Mask
      </button>
    </>
  }

You can customize the editor using additional, optional props:

Prop	Description	Default
cursorSize	Radius (in pixels) of the brush for editing the mask	10
onCursorSizeChange	Callback fired when the user changes the brush size via mousewheel. If not provided, mouse wheel events will be ignored.	undefined
maskOpacity	CSS opacity, decimal between 0 – 1	0.75
maskColor	A hex color (with or without leading '#').	#23272d
maskBlendMode	The CSS blending mode for the mask layer. Doesn't affect the output mask, just how it renders on top of your source image.	normal