शेड्यूलर आणि डेटा ग्रिड @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 द्या, कारण सर्व्हरचा आज वापरकर्त्याचा आज असेलच असे नाही.