Signature pad

Strokes drawn with a pointer or a pen and its pressure, smoothed, undone and cleared, with a typed name for whoever cannot draw.

surface

size

scheme

direction

Draw or type #

Signature

Or type your name

export const SignaturePadStyle = forSlots(SignaturePadSlots)(Recipes.SignaturePad({}))

/** The strokes and the typed name are the pad's Model, folded with `update`. */
export const signaturePad = <Message>(
  style: NamedStyle<typeof SignaturePadSlots>,
  model: SignaturePad.Model,
  onMessage: (message: SignaturePad.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  h.div(
    [h.Style({ inlineSize: 'min(28rem, 100%)' })],
    [SignaturePad.view({ model, onMessage, label: 'Signature', style }, h)],
  )

Usage

Each example above names the function that drew it, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.

The recipe ↗This code ↗