दस्तावेज़ीकरण: react-intlayer में t फ़ंक्शन

react-intlayer पैकेज में t फ़ंक्शन आपके React एप्लिकेशन के भीतर इनलाइन अंतरराष्ट्रीयकरण के लिए एक मौलिक उपकरण है। यह आपको अपने कॉम्पोनेंट्स के भीतर सीधे अनुवाद परिभाषित करने की अनुमति देता है, जिससे वर्तमान लोकल के आधार पर स्थानीयकृत सामग्री प्रदर्शित करना सरल हो जाता है।

अवलोकन

t फ़ंक्शन का उपयोग आपके कॉम्पोनेंट्स में सीधे विभिन्न लोकल के लिए अनुवाद प्रदान करने के लिए किया जाता है। प्रत्येक समर्थित लोकल के लिए अनुवादों वाला एक ऑब्जेक्ट पास करके, t आपके React एप्लिकेशन में वर्तमान लोकल संदर्भ के आधार पर उपयुक्त अनुवाद लौटाता है।

मुख्य विशेषताएँ

• इनलाइन अनुवाद: त्वरित, इनलाइन टेक्स्ट के लिए आदर्श जो अलग सामग्री घोषणा की आवश्यकता नहीं है।
• स्वचालित लोकल चयन: वर्तमान लोकल के अनुसार अनुवाद स्वचालित रूप से लौटाता है।
• टाइपस्क्रिप्ट समर्थन: टाइपस्क्रिप्ट के साथ उपयोग करने पर टाइप सुरक्षा और ऑटोकम्प्लीशन प्रदान करता है।
• आसान एकीकरण: React कॉम्पोनेंट्स के भीतर सहजता से काम करता है।

फ़ंक्शन हस्ताक्षर

t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string

पैरामीटर

• translations: एक ऑब्जेक्ट जहां कुंजी लोकल कोड होते हैं (जैसे, en, fr, es) और मान संबंधित अनुवादित स्ट्रिंग्स होते हैं।

रिटर्न करता है

• एक स्ट्रिंग जो वर्तमान लोकल के लिए अनुवादित सामग्री का प्रतिनिधित्व करती है।

उपयोग के उदाहरण

एक कॉम्पोनेंट में t का बुनियादी उपयोग

import type { FC } from "react";
import { t } from "react-intlayer";

export const ComponentExample: FC = () => {
  return (
    <div>
      <p>
        {t({
          en: "This is an example of a component",
          fr: "Ceci est un exemple de composant",
          es: "Este es un ejemplo de componente",
        })}
      </p>
    </div>
  );
};

एट्रिब्यूट्स में इनलाइन अनुवाद

t फ़ंक्शन JSX एट्रिब्यूट्स में इनलाइन अनुवाद के लिए विशेष रूप से उपयोगी है। जब आप alt, title, href, या aria-label जैसे एट्रिब्यूट्स का स्थानीयकरण करते हैं, तो आप सीधे एट्रिब्यूट के भीतर t का उपयोग कर सकते हैं।

<button
  aria-label={t({
    en: "Submit",
    fr: "Soumettre",
    es: "Enviar",
  })}
>
  {t({
    en: "Submit",
    fr: "Soumettre",
    es: "Enviar",
  })}
  <img
    src="/path/to/image"
    alt={t({
      en: "A beautiful scenery",
      fr: "Un beau paysage",
      es: "Un hermoso paisaje",
    })}
  />
</button>

उन्नत विषय

टाइपस्क्रिप्ट एकीकरण

जब टाइपस्क्रिप्ट के साथ t फ़ंक्शन का उपयोग किया जाता है, तो यह टाइप-सुरक्षित होता है, जिससे यह सुनिश्चित होता है कि सभी आवश्यक स्थानीय भाषाएँ प्रदान की गई हैं।

import { t, type IConfigLocales } from "react-intlayer";

const translations: IConfigLocales<string> = {
  en: "Welcome",
  fr: "Bienvenue",
  es: "Bienvenido",
};

const greeting = t(translations);

स्थानीय भाषा पहचान और संदर्भ

react-intlayer में, वर्तमान स्थानीय भाषा IntlayerProvider के माध्यम से प्रबंधित की जाती है। सुनिश्चित करें कि यह प्रदाता आपके घटकों को लपेटता है और locale प्रॉप सही ढंग से पास किया गया है।

उदाहरण:

import type { FC } from "react";
import type { Locales } from "intlayer";
import { IntlayerProvider } from "react-intlayer";

const App: FC<{ locale: Locales }> = ({ locale }) => (
  <IntlayerProvider locale={locale}>{/* आपके घटक यहाँ */}</IntlayerProvider>
);

सामान्य त्रुटियाँ और समस्या निवारण

t अपरिभाषित या गलत अनुवाद लौटाता है

• कारण: वर्तमान लोकल सही ढंग से सेट नहीं है, या वर्तमान लोकल के लिए अनुवाद गायब है।
• समाधान:
  • सत्यापित करें कि IntlayerProvider उपयुक्त locale के साथ सही ढंग से सेट किया गया है।
  • सुनिश्चित करें कि आपके अनुवाद ऑब्जेक्ट में सभी आवश्यक लोकल शामिल हैं।

TypeScript में अनुवाद गायब होना

• कारण: अनुवाद ऑब्जेक्ट आवश्यक लोकल को पूरा नहीं करता है, जिससे TypeScript त्रुटियाँ होती हैं।
• समाधान: अपने अनुवादों की पूर्णता सुनिश्चित करने के लिए IConfigLocales प्रकार का उपयोग करें।

const translations: IConfigLocales<string> = {
  en: "Text",
  fr: "Texte",
  // es: 'Texto', // 'es' का अभाव TypeScript त्रुटि उत्पन्न करेगा
};

const text = t(translations);

प्रभावी उपयोग के लिए सुझाव

1. सरल इनलाइन अनुवाद के लिए t का उपयोग करें: अपने कंपोनेंट्स के भीतर सीधे छोटे टेक्स्ट के टुकड़ों का अनुवाद करने के लिए आदर्श।
2. संरचित सामग्री के लिए useIntlayer को प्राथमिकता दें: अधिक जटिल अनुवाद और सामग्री पुन: उपयोग के लिए, घोषणा फ़ाइलों में सामग्री परिभाषित करें और useIntlayer का उपयोग करें।
3. सुसंगत लोकल प्रदान करना: सुनिश्चित करें कि आपका लोकल आपके पूरे एप्लिकेशन में IntlayerProvider के माध्यम से सुसंगत रूप से प्रदान किया गया है।
4. TypeScript का लाभ उठाएं: TypeScript प्रकारों का उपयोग करें ताकि गायब अनुवादों को पकड़ा जा सके और प्रकार सुरक्षा सुनिश्चित हो सके।

निष्कर्ष

react-intlayer में t फ़ंक्शन आपके React एप्लिकेशन में इनलाइन अनुवादों को प्रबंधित करने के लिए एक शक्तिशाली और सुविधाजनक उपकरण है। इसे प्रभावी ढंग से एकीकृत करके, आप अपने ऐप की अंतरराष्ट्रीयकरण क्षमताओं को बढ़ाते हैं, जिससे विश्व भर के उपयोगकर्ताओं के लिए बेहतर अनुभव प्रदान होता है।

अधिक विस्तृत उपयोग और उन्नत सुविधाओं के लिए, कृपया react-intlayer प्रलेखन देखें।

ध्यान दें: याद रखें कि अपने IntlayerProvider को सही ढंग से सेट अप करें ताकि वर्तमान लोकल आपके घटकों तक सही ढंग से पहुंचाया जा सके। यह t फ़ंक्शन के लिए सही अनुवाद लौटाने के लिए अत्यंत महत्वपूर्ण है।