React

@tanrei/react, @tanrei/web के हर कस्टम एलिमेंट को एक असली React कंपोनेंट में लपेटता है, जिसकी प्रॉपर्टी और इवेंट हैंडलर टाइप किए हुए हैं। ये रैपर कस्टम एलिमेंट मैनिफ़ेस्ट से जनरेट होते हैं, इसलिए वे हमेशा उन एलिमेंट से मेल खाते हैं जिन्हें वे लपेटते हैं।

प्री-रिलीज़

0.1.0-next.0 npm पर dist-tag next के साथ प्रकाशित है: 0.1.0 तक @tanrei/react@next और @tanrei/web@next इंस्टॉल करें। 0.x प्री-रिलीज़ के दौरान पुराने वर्शन के साथ संगतता नहीं रखी जाती: कोई भी प्री-रिलीज़ पहले से अप्रचलित घोषित किए बिना कुछ भी तोड़ सकती है, और क्या टूटा, यह उसका changeset बताता है।

इंस्टॉल करें

link

React 18 या उसके बाद का वर्शन ज़रूरी है।

npm से

link

npm install @tanrei/react @tanrei/web

सोर्स से

link

main पर मौजूद सोर्स इस्तेमाल करने के लिए Web पैकेज की तरह (Git, Node 22.22 या उसके बाद का वर्शन, pnpm 12): रिपॉज़िटरी के क्लोन में दोनों पैकेज बिल्ड करें और उन्हें पैक करें,

git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/web --filter @tanrei/react build
pnpm --filter @tanrei/web --filter @tanrei/react pack --pack-destination ../tanrei-packages

फिर पैक की गई दोनों फ़ाइलें एक ही कमांड से अपने प्रोजेक्ट में इंस्टॉल करें, ताकि React पैकेज को Web पैकेज अपने बग़ल में मिल जाए:

npm install path/to/tanrei-packages/tanrei-web-*.tgz path/to/tanrei-packages/tanrei-react-*.tgz

इस्तेमाल

link

कंपोनेंट रेंडर होने से पहले स्टाइलशीट एक बार लोड करें: tanrei.css में पेज का बेस, टोकन और पैकेज की बाक़ी सारी स्टाइलशीट एक फ़ाइल में हैं। उन्हें एक-एक करके लोड करने के लिए वेब गाइड देखें।

import '@tanrei/web/tanrei.css';
import '@tanrei/web/words/en';
import { Button } from '@tanrei/react';

export function Toolbar({ onDeploy }: { onDeploy: () => void }) {
  return (
    <>
      <Button variant="filled" onClick={onDeploy}>
        डिप्लॉय करें
      </Button>
      <Button variant="text" size="small" disabled>
        रोल बैक करें
      </Button>
    </>
  );
}

प्रॉपर्टी के नाम वही हैं जो एलिमेंट के ऐट्रिब्यूट के हैं (variant, size, disabled)। इवेंट सामान्य React हैंडलर हैं। एलिमेंट का अपना इवेंट on और कैमल केस में इवेंट के नाम से सुना जाता है, जैसे React अपने इवेंट का नाम रखता है (onKeyDown): नेविगेशन ड्रॉअर expandedchange भेजता है, और आप उसे onExpandedChange से सुनते हैं।

@tanrei/web/words/en हर उस लेबल और संदेश के लिए सादी अंग्रेज़ी में एक शब्द देता है जिसे कंपोनेंट दिखाते या कहते हैं, जैसे ज़रूरी वाले टैग का या बंद करने वाले बटन का नाम; इसे छोड़कर @tanrei/react के setWords() से अपने शब्द भी दे सकते हैं। देखें शब्द।

हर डिज़ाइन सिस्टम की एक एंट्री

link

पैकेज में Tanrei के साथ आने वाले हर डिज़ाइन सिस्टम की एक एंट्री है, ताकि आपका एडिटर वही सुझाए, और टाइप जाँच वही स्वीकार करे, जो आपके सिस्टम में है:

एंट्री	यह क्या एक्सपोर्ट करती है
@tanrei/react	डिफ़ॉल्ट सिस्टम, Tanrei, के कंपोनेंट। FAB मेन्यू, जो m3-like लेयर में रहता है, और सेगमेंटेड बटन, जिसे Tanrei शामिल नहीं करता, इसमें नहीं हैं; और जिस वेरिएंट को Tanrei शामिल नहीं करता, वह प्रॉप का मान नहीं है: <TextField variant="outlined"> टाइप जाँच में पास नहीं होता
@tanrei/react/m3-like, @tanrei/react/m3-expressive-like, @tanrei/react/cupertino	उस प्रीसेट के कंपोनेंट, उसके वेरिएंट के साथ
@tanrei/react/advanced	उन्नत कंपोनेंट, यानी वे हिस्से जिनसे दूसरे कंपोनेंट बनते हैं: TextInput, ModalLayer, Combobox और बाकी। प्रोडक्ट आम तौर पर उनसे बना कंपोनेंट लिखता है: TextField, Dialog, ComboboxField
@tanrei/react/all	हर कंपोनेंट, चाहे वह किसी भी सिस्टम में हो: आपके अपने डिज़ाइन सिस्टम के लिए, और नया सिस्टम बनाने के लिए

import '@tanrei/web/tokens.css';
import '@tanrei/web/systems/m3-like.css';
import { FabMenu, FabMenuItem, TextField } from '@tanrei/react/m3-like';

कोई कंपोनेंट हर एंट्री में वही है, इसलिए बंडलर अब भी सिर्फ़ वही रखता है जो आप इंपोर्ट करते हैं। हर एंट्री setWords, missingWords और TanreiEvent टाइप भी एक्सपोर्ट करती है। एंट्रियाँ हर सिस्टम की कंपोनेंट सूची, @tanrei/web/systems/<id>.components.json, से बनाई जाती हैं, जिसमें हर कंपोनेंट की एंट्री (react.import) लिखी होती है; आपके अपने सिस्टम की सूची, जिसे tanrei build लिखता है, @tanrei/react/all बताती है।

सर्वर रेंडरिंग

link

कंपोनेंट सर्वर पर कस्टम एलिमेंट का टैग रेंडर करते हैं और ब्राउज़र में अपग्रेड होते हैं। जिन फ़्रेमवर्क में सर्वर और क्लाइंट अलग-अलग हैं, उनमें आप जो एंट्री इस्तेमाल करते हैं, उसे किसी क्लाइंट कंपोनेंट से इंपोर्ट करें, ताकि एलिमेंट की परिभाषाएँ ब्राउज़र में रजिस्टर हों।

टिप्पणी

थीम, कंट्रास्ट, टोकन और फ़ॉन्ट ठीक वैसे ही काम करते हैं जैसा Web गाइड में बताया गया है; React पैकेज इनके ऊपर अपनी ओर से कुछ नहीं जोड़ता।