Formulários
cosmemilton-ui/client

CmSignaturePad

Use para coletar uma assinatura manuscrita (mouse, toque ou caneta) em laudos e formulários, com valor exportável em PNG e integração nativa com forms via name.

Import

tsx
import { CmSignaturePad } from "cosmemilton-ui/client";

Uso básico

Com name, para envio direto em um <form> nativo.

Pré-visualização via onChange

Mostra o PNG capturado abaixo do canvas, e o texto muda quando a assinatura é limpa.

Nenhuma assinatura ainda.

API rápida

Props principais de cada peça exportada.

CmSignaturePad

nameheightstrokeColordisabledclearLabelplaceholderariaLabeldefaultValueonChangeapiRef

Notas

O fundo do traço é sempre branco (independente do tema do app), para manter contraste correto em impressão e PDF.

Com name definido, um <input type="hidden"> é sincronizado com o data URL — não é preciso ler o valor manualmente para enviar em um <form>.

defaultValue pré-carrega uma assinatura já coletada (data URL) e é tratado como semente não controlada, como em outros componentes da lib — não é resincronizado a cada re-render.

apiRef expõe clear/isEmpty/toDataURL/toSVG; toSVG devolve os traços como vetor (reescala sem perda), útil para compor no PDF do laudo.

A área desenhável é redimensionada com ResizeObserver e ajustada ao devicePixelRatio do dispositivo, para o traço não borrar em telas de alta densidade.