Signature Pad React component

Signature Pad is a box people sign in with a mouse, a finger or a stylus. The ink gets thinner on fast strokes and thicker on slow ones, and responds to pen pressure where the device reports it, so a signature looks like real ink. A Draw and Type switch lets people type their name instead, shown in a handwriting-style face, and the last stroke can be undone or the pad cleared.

onChange returns the result after every change: isEmpty, a transparent PNG as a data URL, standalone SVG markup, the mode and the typed name. penColor sets the ink on screen, and exportColor the color used in the PNG and SVG (near-black by default), so a signature drawn on a dark page still prints on white paper. minWidth and maxWidth set the stroke range, height the pad height, allowTyping the Type option, and label, helperText, placeholder, size and width the frame.

Use Signature Pad for contracts, delivery confirmations, consent forms, waivers and check-ins. The ink responds to speed and pen pressure, so a signature drawn with a finger or an Apple Pencil looks like ink rather than a flat line.

Always keep the Type option on unless you have a reason not to: people who use a keyboard, a screen reader or switch access can't draw, and a typed name is legally accepted as an electronic signature in most places. Store the image together with who signed, when and what they agreed to; the image alone doesn't prove much.