El planificador y la cuadrícula de datos también son componentes de React, en @needless-ui/react: las mismas funciones, el mismo comportamiento con el teclado y la misma accesibilidad que en Angular, la misma hoja de estilos y la misma licencia MIT. Los demás componentes están en camino. Ambos necesitan React 19 y funcionan con el Next.js App Router y con Vite.
Instalación
pnpm add @needless-ui/react @needless-ui/cssImporta los estilos
Los componentes no incluyen estilos. Importa la hoja de estilos una sola vez, desde un archivo CSS de tu aplicación.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Las capas funcionan igual que en Angular: los resets van en una capa anterior a nui y, con Tailwind CSS, nui va entre la base de Tailwind y sus utilidades, como explica la guía de primeros pasos.
Un planificador
Cada componente tiene su propio punto de entrada. El planificador muestra los events que le pasas y te avisa cuando alguien mueve uno o elige un intervalo para uno nuevo: los eventos los guardas tú.
Una cuadrícula de datos
Describe las columns fuera del componente, para que la cuadrícula no repita su trabajo en cada renderizado. Una edición llama a onRowsChange con las filas nuevas, y los métodos, como la exportación a Excel, están en la ref de la cuadrícula.
La API al estilo de React
Los componentes de React siguen las mismas especificaciones que los de Angular, así que sus API coinciden, al estilo de React. Las páginas de la API enumeran todas las props: las del planificador y las de la cuadrícula de datos.
| Angular | React |
|---|---|
Un modelo, [(view)] | Estado: view con onViewChange, o defaultView para que lo guarde el componente |
Un output, (eventClick) | Un callback, onEventClick |
Una plantilla, <ng-template nuiSchedulerEvent> | Una función que dibuja, renderEvent |
Un método, scheduler.next() | Un método de la ref, ref.current.next() |
children, para datos en árbol | getChildren: React reserva children para los elementos |
locale, por defecto el LOCALE_ID de la aplicación | locale, por defecto en-US |
Renderizado en el servidor
Los dos componentes se renderizan en el servidor y se hidratan en el navegador. El paquete los marca como componentes de cliente, así que un Server Component puede renderizarlos con props serializables, y funciones auxiliares como nuiSchedulerFromIcs se ejecutan en el servidor. Los callbacks no pueden pasar al navegador: un componente que los recibe va dentro de un componente de cliente propio, como los dos de arriba.
Lo que depende de quien lee espera al navegador: la línea de la hora actual del planificador y qué día es hoy. Pasa al planificador un defaultDate cuando lo renderice un servidor, porque el día de hoy del servidor puede no ser el de quien lee.