---
title: "Signature"
slug: "signature"
category: "Mini Widgets"
reactComponent: "ArcWidgetSignature"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "signature.tsx"
locale: "es"
hosts: "react"
---

# 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`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
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>
    </>
  );
}
```

## 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: [Estado y eventos](/docs/react/patterns/react-state-events).

### onSave

La firma dibujada como data-URL de imagen.

```typescript
onSave?: (dataUrl: string) => void | Promise<void>;
```

### onClear

La firma se ha vaciado.

```typescript
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. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## 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.

```typescript
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>;
}
```