---
title: "Componentes React"
slug: "react-components"
category: "Introducción"
hosts: "react"
locale: "es"
order: 3.5
description: "Los 22 componentes del paquete React y sus referencias."
---

# Componentes React

Estos componentes están en [@arcrider/arcwidgets-react en npm](https://www.npmjs.com/package/@arcrider/arcwidgets-react), versión `0.1.0-alpha.5`. Impórtalos directamente del paquete. Estilos y tipos de TypeScript se incluyen.

¿Nuevo aquí? Empieza con [instalación y el primer widget](/docs/react/intro/setup-react).

## Widgets de negocio

- `ArcWidgetTable` — [Table](/docs/react/widgets/custom-table)
- `ArcWidgetKanban` — [Kanban](/docs/react/widgets/custom-kanban)
- `ArcWidgetCalendarWeek` — [Calendar Week](/docs/react/widgets/custom-calendar-week)
- `ArcWidgetCalendarGrid` — [Calendar Grid](/docs/react/widgets/custom-calendar-grid)
- `ArcWidgetCalendarTimeline` — [Calendar Timeline](/docs/react/widgets/custom-calendar-timeline)
- `ArcWidgetDrawing` — [Drawing](/docs/react/widgets/custom-drawing)
- `ArcWidgetUpload` — [Upload](/docs/react/widgets/custom-upload)
- `ArcWidgetSlideshow` — [Slideshow](/docs/react/widgets/custom-slideshow)

## Mini widgets

- `ArcWidgetBadge` — [Badge](/docs/react/mini-widgets/badges)
- `ArcWidgetButton` — [Button](/docs/react/mini-widgets/buttons)
- `ArcWidgetDevTools` — [DevTools](/docs/react/widgets/custom-dev-tools)
- `ArcWidgetIcon` — [Icon](/docs/react/mini-widgets/custom-icon)
- `ArcWidgetInput` — [Input](/docs/react/mini-widgets/input)
- `ArcWidgetKpiBar` — [KPI Bar](/docs/react/widgets/custom-kpi-bar)
- `ArcWidgetLayout` — [Layout](/docs/react/widgets/custom-layout)
- `ArcWidgetNumpad` — [Numpad](/docs/react/widgets/custom-numpad)
- `ArcWidgetProgressBar` — [Progress Bar](/docs/react/mini-widgets/progress-bar)
- `ArcWidgetSelect` — [Select](/docs/react/mini-widgets/select)
- `ArcWidgetSignature` — [Signature](/docs/react/mini-widgets/signature)
- `ArcWidgetSlider` — [Slider](/docs/react/widgets/custom-slider)
- `ArcWidgetSteps` — [Steps](/docs/react/widgets/custom-steps)
- `ArcWidgetText` — [Text](/docs/react/mini-widgets/text)

## Configuración y eventos

Cada widget tiene su propio formato `data` y un tipo TypeScript correspondiente. Una tabla usa `table`, un tablero Kanban usa `swimlanes`. Usa los tipos de tu versión del paquete para comprobar la configuración.

Las callback props conectan las interacciones con tu aplicación. En Kanban, por ejemplo, `onItemClick` y `onItemDrop`. El fallback genérico es `onAction(type, ...args)`; el primer argumento es el nombre del evento, no un objeto de acción.

Las referencias React incluyen ejemplos completos, parámetros, firmas de callback y límites conocidos. El acceso a datos y el guardado los implementas con tu estado React y tu API. Las fuentes de todos los ejemplos están en el paquete bajo `examples/docs/`.

## Licencia y actualizaciones

Los mini widgets son gratuitos en producción según las condiciones de uso. Los widgets premium puedes usarlos para desarrollo y evaluación; el uso productivo necesita una licencia de proyecto. Detalles: [Paquete React y licencias](/docs/react/faq/react-paket-und-lizenzierung).

La versión es una alfa. Al actualizar, comprueba tipos, nombres de callback y tus propios flujos.