---
title: "Text"
slug: "text"
category: "Mini Widgets"
reactComponent: "ArcWidgetText"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "text.tsx"
locale: "es"
hosts: "react"
---

# Text en React

Muestra texto o contenidos de React con tipografía y alineación uniformes.

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 { ArcWidgetText } from '@arcrider/arcwidgets-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() {
  return (
    <ArcWidgetText
      data={{
        value: t(
          'Eine längere Beschreibung für die Aufgabenübersicht',
          'A longer description for the task overview',
          'Una descripción más larga para el resumen de tareas',
        ),
        width: '260px',
        fontSize: '16px',
        fontColor: '#374151',
        truncate: true,
      }}
    />
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetTextData`. 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).

Este widget es un componente de representación y no ofrece callbacks de interacción propios.

## 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: `ArcWidgetSlot`.

### width

Ancho del widget como valor de tamaño.

Tipo: `string`.

### height

Alto del widget, p. ej. `"320px"`. Los valores en porcentaje necesitan un contenedor padre con altura fija.

Tipo: `string`.

### alignX

Alineación horizontal.

Tipo: `'left' | 'right' | 'center' | string`.

### alignY

Alineación vertical.

Tipo: `'top' | 'bottom' | 'center' | string`.

### fontSize

Tamaño de fuente como valor CSS.

Tipo: `string`.

### fontWeight

Grosor de la fuente.

Tipo: `string | number`.

### fontColor

Color de la fuente.

Tipo: `string`.

### lineHeight

Altura de línea.

Tipo: `string`.

### textAlign

Alineación del texto.

Tipo: `'left' | 'right' | 'center' | 'justify' | string`.

### textWrap

Comportamiento de salto de línea.

Tipo: `string`.

### textScroll

Comportamiento de scroll para el texto.

Tipo: `boolean | string`.

### textDirection

Dirección de escritura.

Tipo: `'horizontal' | 'vertical' | string`.

### textDecoration

Decoración del texto.

Tipo: `ArcWidgetTextDecoration`.

### truncate

Recorta el texto demasiado largo cuando el ancho es limitado.

Tipo: `boolean`.

## Comportamiento y límites

- `value` admite JSX. Es posible el rich text de fuente propia; para contenidos externos, un elemento de texto de React es la opción segura.

- `truncate` recorta textos largos. Un ancho limitado es requisito para ello.

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 ArcWidgetTextDecoration {
	type?: string;
	style?: string;
	color?: string;
	thickness?: string;
}

export interface ArcWidgetTextData extends ArcWidgetBaseData {
	value?: ArcWidgetSlot;
	width?: string;
	height?: string;
	alignX?: 'left' | 'right' | 'center' | string;
	alignY?: 'top' | 'bottom' | 'center' | string;
	fontSize?: string;
	fontWeight?: string | number;
	fontColor?: string;
	lineHeight?: string;
	textAlign?: 'left' | 'right' | 'center' | 'justify' | string;
	textWrap?: string;
	textScroll?: boolean | string;
	textDirection?: 'horizontal' | 'vertical' | string;
	textDecoration?: ArcWidgetTextDecoration;
	truncate?: boolean;
}
```