Penjadwal dan data grid juga tersedia sebagai komponen React, di @needless-ui/react: fitur, keyboard, dan aksesibilitas yang sama seperti di Angular, stylesheet yang sama, dan lisensi MIT yang sama. Komponen lainnya menyusul. Keduanya memerlukan React 19, dan bekerja dengan Next.js App Router maupun Vite.
Instalasi
pnpm add @needless-ui/react @needless-ui/cssImpor gaya
Komponennya tidak membawa gaya sendiri. Impor stylesheet sekali saja, dari salah satu file CSS aplikasi Anda.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Layer bekerja seperti di Angular: reset diletakkan di layer sebelum nui, dan dengan Tailwind CSS, nui berada di antara layer base Tailwind dan utilitasnya, seperti yang ditunjukkan di Memulai.
Penjadwal
Setiap komponen punya entry point sendiri. Penjadwal menampilkan events yang Anda teruskan, lalu memberi tahu Anda saat pengguna memindahkan acara atau memilih waktu untuk acara baru: Anda sendiri yang menyimpan acaranya.
Data grid
Definisikan columns di luar komponen, agar grid tidak mengulang pekerjaannya di setiap render. Pengeditan memanggil onRowsChange dengan baris baru, dan metode seperti ekspor Excel ada di ref grid.
API dalam istilah React
Komponen React mengikuti spesifikasi yang sama dengan komponen Angular, jadi API-nya sepadan, dalam istilah React. Halaman API mencantumkan setiap prop: milik penjadwal dan milik data grid.
| Angular | React |
|---|---|
Model, [(view)] | State: view dengan onViewChange, atau defaultView agar disimpan oleh komponen |
Output, (eventClick) | Callback, onEventClick |
Template, <ng-template nuiSchedulerEvent> | Fungsi yang menggambar, renderEvent |
Metode, scheduler.next() | Metode di ref, ref.current.next() |
children, untuk data pohon | getChildren: React memakai children untuk elemen |
locale, default-nya LOCALE_ID aplikasi | locale, default-nya en-US |
Rendering sisi server
Kedua komponen dirender di server, lalu dihidrasi di browser. Paketnya menandai keduanya sebagai client component, sehingga Server Component bisa merendernya dengan props yang bisa diserialisasi, dan helper seperti nuiSchedulerFromIcs berjalan di server. Callback tidak bisa menyeberang ke browser: komponen yang menerimanya diletakkan di dalam client component buatan Anda sendiri, seperti dua contoh di atas.
Apa pun yang bergantung pada pembaca menunggu browser: garis penanda waktu sekarang di penjadwal, dan hari apa hari ini. Beri penjadwal defaultDate saat dirender di server, karena “hari ini” di server belum tentu sama dengan milik pembaca.