Den Terminplaner und das Data Grid gibt es auch als React-Komponenten, in @needless-ui/react: mit denselben Funktionen, derselben Tastaturbedienung und Barrierefreiheit wie in Angular, demselben Stylesheet und derselben MIT-Lizenz. Die anderen Komponenten folgen. Beide brauchen React 19 und funktionieren mit dem Next.js App Router und mit Vite.
Installation
pnpm add @needless-ui/react @needless-ui/cssStyles importieren
Die Komponenten bringen keine Styles mit. Importiere das Stylesheet einmal, in einer CSS-Datei deiner App.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Die Layer funktionieren wie in Angular: Resets kommen in einen Layer vor nui, und mit Tailwind CSS gehört nui zwischen den Base-Layer und die Utilities von Tailwind, wie in der Anleitung Erste Schritte gezeigt.
Ein Terminplaner
Jede Komponente hat ihren eigenen Entry Point. Der Terminplaner zeigt die events, die du übergibst, und meldet sich bei dir, wenn jemand einen Termin verschiebt oder Zeit für einen neuen markiert: Die Termine verwaltest du selbst.
Ein Data Grid
Beschreibe die columns außerhalb der Komponente, damit das Grid seine Arbeit nicht bei jedem Rendern wiederholt. Jede Änderung ruft onRowsChange mit den neuen Zeilen auf, und Methoden wie der Excel-Export sind über die ref des Grids erreichbar.
Die API auf React-Art
Die React-Komponenten folgen denselben Spezifikationen wie die Angular-Komponenten, daher entsprechen sich ihre APIs, nur eben auf React-Art. Die API-Seiten listen alle Props auf: die des Terminplaners und die des Data Grids.
| Angular | React |
|---|---|
Ein Model, [(view)] | State: view mit onViewChange oder defaultView, wenn die Komponente ihn selbst verwalten soll |
Ein Output, (eventClick) | Ein Callback, onEventClick |
Ein Template, <ng-template nuiSchedulerEvent> | Eine Funktion, die zeichnet: renderEvent |
Eine Methode, scheduler.next() | Eine Methode an der ref, ref.current.next() |
children für Baumdaten | getChildren: React reserviert children für Elemente |
locale, standardmäßig die LOCALE_ID der App | locale, standardmäßig en-US |
Serverseitiges Rendering
Beide Komponenten werden auf dem Server gerendert und im Browser hydriert. Das Paket kennzeichnet sie als Client Components, sodass eine Server Component sie mit serialisierbaren Props rendern kann, und Hilfsfunktionen wie nuiSchedulerFromIcs laufen auf dem Server. Callbacks kommen nicht vom Server in den Browser: Eine Komponente, die Callbacks bekommt, gehört in eine eigene Client Component, wie die beiden oben.
Was vom Leser abhängt, wartet auf den Browser: die Linie des Terminplaners für die aktuelle Uhrzeit und welcher Tag heute ist. Gib dem Terminplaner ein defaultDate, wenn ein Server ihn rendert, denn für den Server ist heute vielleicht ein anderer Tag als für den Leser.