Planlayıcı ve veri tablosu, @needless-ui/react paketinde React bileşenleri olarak da var: Angular’dakiyle aynı özellikler, klavye desteği ve erişilebilirlik, aynı stil dosyası ve aynı MIT lisansı. Diğer bileşenler de yolda. React 19 gerektirirler; Next.js App Router ve Vite ile çalışırlar.
Kurulum
pnpm add @needless-ui/react @needless-ui/cssStilleri içe aktarın
Bileşenler hiçbir stil içermez. Stil dosyasını uygulamanızın bir CSS dosyasından bir kez içe aktarın.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';Katmanlar Angular’daki gibi çalışır: sıfırlamalar nui katmanından önceki bir katmana girer; Tailwind CSS kullanıyorsanız nui, Başlarken kılavuzunda gösterildiği gibi Tailwind’in base katmanıyla utilities katmanının arasına yerleşir.
Planlayıcı
Her bileşenin kendi giriş noktası vardır. Planlayıcı, verdiğiniz events dizisini gösterir; kullanıcılar bir etkinliği taşıdığında ya da yeni bir etkinlik için zaman seçtiğinde size haber verir: etkinlikleri siz tutarsınız.
Veri tablosu
columns dizisini bileşenin dışında tanımlayın; böylece tablo her render’da aynı işi yeniden yapmaz. Bir düzenleme onRowsChange fonksiyonunu yeni satırlarla çağırır; Excel’e aktarma gibi metotlara ise tablonun ref nesnesi üzerinden ulaşılır.
React terimleriyle API
React bileşenleri Angular bileşenleriyle aynı belirtimlere uyar; bu yüzden API’leri React’in terimleriyle birbirini karşılar. API sayfaları her prop’u listeler: planlayıcınınki ve veri tablosununki.
| Angular | React |
|---|---|
Bir model, [(view)] | Durum: onViewChange ile view ya da bileşenin kendisi tutsun diye defaultView |
Bir çıktı, (eventClick) | Bir geri çağırma, onEventClick |
Bir şablon, <ng-template nuiSchedulerEvent> | Çizen bir fonksiyon, renderEvent |
Bir metot, scheduler.next() | ref üzerinde bir metot, ref.current.next() |
Ağaç verisi için children | getChildren: React, children adını öğeler için ayırır |
locale, varsayılanı uygulamanın LOCALE_ID değeri | locale, varsayılanı en-US |
Sunucu tarafında render
İki bileşen de sunucuda render edilir ve tarayıcıda hydrate edilir. Paket onları istemci bileşeni olarak işaretler; böylece bir Server Component onları serileştirilebilen prop’larla render edebilir, nuiSchedulerFromIcs gibi yardımcı fonksiyonlar da sunucuda çalışır. Geri çağırmalar tarayıcıya geçemez: onları alan bir bileşen, yukarıdaki iki örnekteki gibi, kendi yazdığınız bir istemci bileşeninin içine girer.
Okuyucuya bağlı olan şeyler tarayıcıyı bekler: planlayıcıda şu anı gösteren çizgi ve bugünün hangi gün olduğu. Planlayıcıyı bir sunucu render ediyorsa ona bir defaultDate verin; çünkü sunucunun bugünü okuyucununkiyle aynı olmayabilir.