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: