Mischief

22 / Documents

Signature Pad

Sign with a pointer on a canvas, or type a name instead. Returns a PNG data URL or the typed text.

Live previewSource

Signature

Draw with a pointer, or switch to typing.

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Sign() {
  return <SignaturePad onChange={(value) => setSignature(value)} />
}

API

mode, defaultMode"draw" | "type"The active method, controlled or uncontrolled.
onChange(value: SignatureValue | null) => voidRuns with the PNG data URL or typed text, and null once cleared.
penColor, lineWidthstring, numberStroke appearance.
heightnumberSigning area height in pixels. Defaults to 180.
typedFontFamilystringThe face used for a typed signature.
hintReactNodeGuidance shown under the signing area.

Accessibility

Drawing on a canvas cannot be done with a keyboard, so typing is a first-class method rather than a fallback, and the canvas says so in its accessible name. The method switch is a labelled group of toggle buttons. Clearing is disabled while there is nothing to clear. The canvas is redrawn at the device pixel ratio so a signature is not blurred on a high-density screen.

Dependencies

lucide-react