React Mask Editor

A drop-in component to add simple image mask editing to your React application. Uses 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.

![](/docs/example.png)

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:

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

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

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`