શેડ્યૂલર અને ડેટા ગ્રિડ @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 આપો, કારણ કે સર્વરનો આજનો દિવસ વપરાશકર્તાનો પણ આજનો દિવસ હોય એવું જરૂરી નથી.