शेड्यूलर और डेटा ग्रिड @needless-ui/react में React कंपोनेंट के रूप में भी मौजूद हैं: Angular जैसे ही फ़ीचर, कीबोर्ड और सुलभता, वही स्टाइलशीट और वही MIT लाइसेंस। बाक़ी कंपोनेंट आने वाले हैं। इन्हें React 19 चाहिए, और ये Next.js App Router और Vite के साथ काम करते हैं।
इंस्टॉल करें
pnpm add @needless-ui/react @needless-ui/cssस्टाइल इम्पोर्ट करें
कंपोनेंट अपने साथ कोई स्टाइल नहीं लाते। स्टाइलशीट को अपनी ऐप की किसी CSS फ़ाइल से एक बार इम्पोर्ट करें।
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';लेयर Angular की तरह ही काम करती हैं: रीसेट nui से पहले की किसी लेयर में जाते हैं, और Tailwind CSS के साथ nui लेयर Tailwind की base लेयर और उसकी यूटिलिटी के बीच आती है, जैसा शुरुआत करें गाइड में दिखाया गया है।
शेड्यूलर
हर कंपोनेंट का अपना एंट्री पॉइंट है। शेड्यूलर आपके दिए events दिखाता है, और जब लोग कोई इवेंट खिसकाते हैं या नए इवेंट के लिए समय चुनते हैं, तो आपको बताता है: इवेंट आपके ही पास रहते हैं।
डेटा ग्रिड
columns को कंपोनेंट के बाहर बताएँ, ताकि ग्रिड हर रेंडर पर अपना काम दोबारा न करे। एडिट होने पर नई पंक्तियों के साथ onRowsChange कॉल होता है, और Excel एक्सपोर्ट जैसे मेथड ग्रिड के ref पर होते हैं।
React के शब्दों में API
React कंपोनेंट उन्हीं स्पेक पर चलते हैं जिन पर Angular वाले, इसलिए उनके API मेल खाते हैं, बस React के शब्दों में। API पेज हर प्रॉप की सूची देते हैं: शेड्यूलर का और डेटा ग्रिड का।
| Angular | React |
|---|---|
मॉडल, [(view)] | स्थिति: onViewChange के साथ view, या defaultView, ताकि कंपोनेंट उसे ख़ुद रखे |
आउटपुट, (eventClick) | कॉलबैक, onEventClick |
टेम्पलेट, <ng-template nuiSchedulerEvent> | बनाने वाला फ़ंक्शन, renderEvent |
मेथड, scheduler.next() | ref पर मेथड, ref.current.next() |
children, ट्री डेटा के लिए | getChildren: React में children एलिमेंट के लिए है |
locale, डिफ़ॉल्ट रूप से ऐप का LOCALE_ID | locale, डिफ़ॉल्ट रूप से en-US |
सर्वर रेंडरिंग
दोनों कंपोनेंट सर्वर पर रेंडर होते हैं और फिर हाइड्रेट होते हैं। पैकेज उन्हें क्लाइंट कंपोनेंट घोषित करता है, इसलिए कोई Server Component उन्हें सीरियलाइज़ हो सकने वाले प्रॉप के साथ रेंडर कर सकता है, और nuiSchedulerFromIcs जैसे हेल्पर सर्वर पर चलते हैं। कॉलबैक ब्राउज़र तक नहीं पहुँच सकते: जो कंपोनेंट उन्हें लेता है, वह आपके अपने किसी क्लाइंट कंपोनेंट में जाता है, ऊपर के दोनों उदाहरणों की तरह।
जो कुछ उपयोगकर्ता पर निर्भर है, वह ब्राउज़र में ही तय होता है: शेड्यूलर में अभी के समय की रेखा, और आज कौन-सा दिन है। जब सर्वर शेड्यूलर रेंडर करे, तो उसे defaultDate दें, क्योंकि ज़रूरी नहीं कि सर्वर का आज उपयोगकर्ता का भी आज हो।