Introduction

Configurar React

arcWidgets ofrece 22 componentes configurables para aplicaciones de negocio. Describes la vista en data y conectas las interacciones con tu estado y tu API mediante callback props.

Instalación

npm install --save-exact @arcrider/arcwidgets-react@0.1.0-alpha.5

Esta documentación corresponde a 0.1.0-alpha.5. El paquete necesita React y React DOM 18 o 19 y se ejecuta en el navegador. Los estilos están incluidos; no hace falta un import CSS aparte. La versión es una alfa: comprueba los flujos que usas antes de actualizar.

Primer widget

Este ejemplo completo se puede usar como App.tsx en una app React de navegador:

import { ArcWidgetBadge, ArcWidgetKanban } 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) =&gt;   lang === 'en' ? en : lang === 'es' ? es : de;
const startLanes = [   {     id: 'open',     title: t('Offen', 'Open', 'Abierto'),     items: [       {         id: 'brief',         title: t('Angebot vorbereiten', 'Prepare quote', 'Preparar oferta'),         tag: t('Heute', 'Today', 'Hoy'),         color: '#d97706',       },     ],   },   {     id: 'done',     title: t('Erledigt', 'Done', 'Hecho'),     items: [] as { id: string; title: string; tag: string; color: string }[],   }, ];
export default function Example() {   const [lanes, setLanes] = useState(startLanes);   const [selected, setSelected] = useState(     t(       'Karte ziehen oder anklicken',       'Drag or click a card',       'Arrastra o pulsa una tarjeta',     ),   );   return (     &lt;&gt;       &lt;ArcWidgetKanban         id=&quot;tasks&quot;         data={{           height: '300px',           swimlanes: lanes.map((lane) =&gt; ({             ...lane,             items: lane.items.map((item) =&gt; ({               id: item.id,               title: item.title,               subtitle: (                 &lt;ArcWidgetBadge                   data={{                     value: item.tag,                     singleColor: item.color,                     borderRadius: '6px',                   }}                 /&gt;               ),               clickable: true,               draggable: true,               borderPosition: 'left',               borderColor: item.color,               borderWidth: '4px',             })),           })),         }}         onItemClick={(_event, { item_index }) =&gt;           setSelected(${t('Aufgabe', 'Task', 'Tarea')} ${item_index + 1})         }         onItemDrop={async (payload) =&gt; {           const next = lanes.map((lane) =&gt; ({             ...lane,             items: [...lane.items],           }));           const [item] = next[payload.source_swimlane_index].items.splice(             payload.item_index_in_section,             1,           );           next[payload.target_swimlane_index].items.splice(             payload.target_index_in_section,             0,             item,           );           setLanes(next);           setSelected(t('Karte verschoben', 'Card moved', 'Tarjeta movida'));         }}       /&gt;       &lt;p aria-live=&quot;polite&quot;&gt;{selected}&lt;/p&gt;     &lt;/&gt;   ); }</code></pre>
Datos y eventos
data contiene la configuración específica del widget. Importa el tipo de datos correspondiente del mismo paquete cuando lo necesites, por ejemplo ArcWidgetKanbanData. id en el componente es opcional e identifica la instancia del widget.
Los callbacks están en el componente. En Kanban, onItemClick informa un evento del navegador y la posición de la tarjeta. Con varias columnas o grupos usa todos los índices adecuados del payload. El fallback genérico es onAction(type, ...args); un callback concreto tiene prioridad.
El acceso a datos, el almacenamiento, la navegación y el manejo de errores viven en tu aplicación. Los slots de contenido admitidos aceptan JSX, así que puedes combinar tus propios componentes con más widgets.
Ejemplos completos y contexto para IA
El paquete incluye las fuentes de todos los ejemplos de widgets y aplicaciones en examples/docs/. Cada archivo exporta un componente React completo.
El enlace Markdown de una página React entrega el mismo contenido React. Para asistentes de IA existen el <a href="/docs/react/llms.txt">índice React</a> y la <a href="/docs/react/llms-full.txt">exportación React completa</a>.
Siguiente
<a href="/docs/react/intro/react-components">Los 22 componentes</a>
<a href="/docs/react/patterns/react-state-events">Estado y eventos</a>
<a href="/docs/react/patterns/nested-widget-descriptors">JSX y widgets anidados</a>
<a href="/docs/react/templates/react-starter">Plantilla de dashboard</a>
<a href="/docs/react/faq/react-troubleshooting">Renderizado en servidor y solución de problemas</a>
<a href="/docs/react/faq/react-paket-und-lizenzierung">Paquete y licencias</a>