Il pianificatore e la griglia dati sono anche componenti React, in @needless-ui/react: stesse funzionalità, stesso comportamento da tastiera e stessa accessibilità di Angular, stesso foglio di stile e stessa licenza MIT. Gli altri componenti arriveranno. Entrambi richiedono React 19 e funzionano con il Next.js App Router e con Vite.
Installazione
pnpm add @needless-ui/react @needless-ui/cssImporta gli stili
I componenti non includono stili. Importa il foglio di stile una volta sola, da un file CSS della tua app.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';I layer funzionano come in Angular: i reset vanno in un layer prima di nui e, con Tailwind CSS, nui va tra la base di Tailwind e le sue utility, come mostra la guida Per iniziare.
Un pianificatore
Ogni componente ha il suo entry point. Il pianificatore mostra gli events che gli passi e ti avvisa quando qualcuno ne sposta uno o sceglie un orario per uno nuovo: gli eventi li tieni tu.
Una griglia dati
Descrivi le columns fuori dal componente, così la griglia non rifà il suo lavoro a ogni render. Una modifica chiama onRowsChange con le nuove righe, e i metodi come l’esportazione in Excel sono sul ref della griglia.
L’API in stile React
I componenti React seguono le stesse specifiche di quelli Angular, quindi le loro API corrispondono, in stile React. Le pagine delle API elencano tutte le props: quelle del pianificatore e quelle della griglia dati.
| Angular | React |
|---|---|
Un model, [(view)] | Stato: view con onViewChange, o defaultView perché lo tenga il componente |
Un output, (eventClick) | Una callback, onEventClick |
Un template, <ng-template nuiSchedulerEvent> | Una funzione che disegna, renderEvent |
Un metodo, scheduler.next() | Un metodo sul ref, ref.current.next() |
children, per i dati ad albero | getChildren: React riserva children agli elementi |
locale, di default il LOCALE_ID dell’app | locale, di default en-US |
Rendering lato server
Entrambi i componenti vengono renderizzati sul server e poi idratati nel browser. Il pacchetto li contrassegna come client component, così un Server Component può renderizzarli con props serializzabili, e funzioni di supporto come nuiSchedulerFromIcs girano sul server. Le callback non possono passare al browser: un componente che le riceve va in un tuo client component, come i due qui sopra.
Ciò che dipende da chi legge aspetta il browser: la linea dell’ora attuale del pianificatore e quale giorno è oggi. Passa al pianificatore una defaultDate quando lo renderizza un server, perché il giorno di oggi sul server potrebbe non essere quello di chi legge.