Mini Widgets
Signature
Signature en React
Captura una firma en un lienzo y pásala como imagen a tu aplicación. El ejemplo guarda localmente en el navegador.
Referencia para @arcrider/arcwidgets-react@0.1.0-alpha.5. <a href="/docs/react/intro/setup-react">Instalación</a> · <a href="/docs/react/intro/react-components">Todos los componentes</a>.
Ejemplo completo
import { ArcWidgetSignature } from '@arcrider/arcwidgets-react';
import { useState } from 'react';
const lang = document.documentElement.lang.startsWith('en') ? 'en' : document.documentElement.lang.startsWith('es') ? 'es' : 'de'; const t = (de: string, en: string, es: string) => lang === 'en' ? en : lang === 'es' ? es : de;
export default function Example() { const [value, setValue] = useState( () => localStorage.getItem('arc-demo-signature') ?? '', ); const [status, setStatus] = useState(t('Bereit', 'Ready', 'Listo')); return ( <> <ArcWidgetSignature id="signature" data={{ value, height: '220px', autoSaveDelay: 600, lineColor: '#0f766e', placeholder: t('Hier unterschreiben', 'Sign here', 'Firma aquí'), clearLabel: t('Löschen', 'Clear', 'Borrar'), editLabel: t('Neu unterschreiben', 'Sign again', 'Volver a firmar'), }} onSave={(url) => { try { localStorage.setItem('arc-demo-signature', url); setValue(url); setStatus( t('Lokal gespeichert', 'Saved locally', 'Guardado en local'), ); } catch { setStatus( t('Speichern fehlgeschlagen', 'Save failed', 'Error al guardar'), ); } }} onClear={() => { localStorage.removeItem('arc-demo-signature'); setValue(''); setStatus(t('Gelöscht', 'Cleared', 'Borrado')); }} /> <p aria-live="polite">{status}</p> </> ); }</code></pre>
Props del componente
id
ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.
data
Configuración de tipo ArcWidgetSignatureData. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.
onAction
Fallback opcional (type: string, ...args: unknown[]) => unknown. El callback concreto tiene prioridad. Detalles: <a href="/docs/react/patterns/react-state-events">Estado y eventos</a>.
onSave
La firma dibujada como data-URL de imagen.
onSave?: (dataUrl: string) => void | Promise<void>;
onClear
La firma se ha vaciado.
onClear?: () => void | Promise<void>;
Configuración
Los siguientes campos pertenecen a data. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.
value
Valor a mostrar o actualmente en edición.
Tipo: string.
height
Alto del widget, p. ej. "320px". Los valores en porcentaje necesitan un contenedor padre con altura fija.
Tipo: string.
autoSaveDelay
Retraso antes de onSave en milisegundos.
Tipo: number.
lineColor
Color de la línea dibujada.
Tipo: string.
lineWidth
Grosor de la línea dibujada.
Tipo: number.
backgroundColor
Color de fondo.
Tipo: string.
placeholder
Aviso cuando el valor está vacío.
Tipo: string.
readonly
Muestra el contenido sin posibilidad de edición.
Tipo: boolean.
clearLabel
Etiqueta para vaciar.
Tipo: string.
editLabel
Etiqueta para editar.
Tipo: string.
Comportamiento y límites
onSave entrega una data-URL de imagen; onClear notifica el vaciado. Mantén data.value sincronizado con el estado guardado.
autoSaveDelay indica el retraso tras dibujar, en milisegundos. readonly impide la edición.
- Para almacenamiento duradero o entre dispositivos, sustituye el almacenamiento local por tu API.
Los campos ArcWidgetSlot admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. <a href="/docs/react/patterns/nested-widget-descriptors">Combinar contenidos</a>.
Tipos de datos
Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como ArcWidgetSlot, ArcWidgetStyles y ArcReactWidgetProps. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.
export interface ArcWidgetSignatureData extends ArcWidgetBaseData {
value?: string;
height?: string;
autoSaveDelay?: number;
lineColor?: string;
lineWidth?: number;
backgroundColor?: string;
placeholder?: string;
readonly?: boolean;
clearLabel?: string;
editLabel?: string;
}
export interface ArcWidgetSignatureProps extends ArcReactWidgetProps<ArcWidgetSignatureData> { onSave?: (dataUrl: string) => void | Promise<void>; onClear?: () => void | Promise<void>; }</code></pre>