आगामी Intlayer रिलीज़ के बारे में सूचनाएं प्राप्त करें
    Creation:2024-08-11Last update:2025-06-29

    React एकीकरण: useI18n हुक दस्तावेज़

    यह अनुभाग React अनुप्रयोगों के भीतर useI18n हुक का उपयोग कैसे करें, इस पर विस्तृत मार्गदर्शन प्रदान करता है, जिससे कुशल सामग्री स्थानीयकरण सक्षम होता है।

    React में useI18n आयात करना

    useI18n हुक को संदर्भ के अनुसार React अनुप्रयोगों में निम्नलिखित तरीके से आयात और एकीकृत किया जा सकता है:

    • क्लाइंट कंपोनेंट्स:

      typescript
      import { useI18n } from "react-intlayer"; // क्लाइंट-साइड React कंपोनेंट्स में उपयोग करें
    • सर्वर कंपोनेंट्स:

    पैरामीटर

    यह हुक दो पैरामीटर स्वीकार करता है:

    1. namespace: अनुवाद कुंजियों के स्कोप के लिए एक शब्दकोश नामस्थान।
    2. locale (वैकल्पिक): इच्छित लोकल। यदि निर्दिष्ट नहीं किया गया है, तो संदर्भ का लोकल डिफ़ॉल्ट के रूप में उपयोग किया जाएगा।

    शब्दकोश

    सभी शब्दकोश कुंजियाँ सामग्री घोषणा फ़ाइलों के भीतर घोषित की जानी चाहिए ताकि प्रकार सुरक्षा बढ़े और त्रुटियों से बचा जा सके। कॉन्फ़िगरेशन निर्देश यहाँ पाए जा सकते हैं

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

    React कंपोनेंट्स के भीतर useI18n हुक का उपयोग करने के उदाहरण:

    src/App.tsx
    import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const t = useI18n("home-page", locale);  return (    <>      <p>{t("introduction")}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};
    src/components/ComponentExample.tsx
    import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => {  const t = useI18n("component-example");  return (    <div>      <h1>{t("title")}</h1> {/* शीर्षक दिखाएं */}      <p>{t("description")}</p> {/* विवरण दिखाएं */}    </div>  );};
    src/components/ServerComponentExample.tsx
    import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1> {/* शीर्षक दिखाएं */}      <p>{t("description")}</p> {/* विवरण दिखाएं */}    </div>  );};

    एट्रिब्यूट हैंडलिंग

    जब एट्रिब्यूट्स का स्थानीयकरण किया जाता है, तो अनुवाद मानों तक उचित रूप से पहुँचें:

    jsx
    <button title={t("buttonTitle.value")}>{t("buttonText")}</button>;{  /* पहुँच योग्यता एट्रिब्यूट्स (जैसे, aria-label) के लिए, .value का उपयोग करें क्योंकि शुद्ध स्ट्रिंग्स आवश्यक हैं */}<button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>;

    अतिरिक्त संसाधन

    • Intlayer विज़ुअल एडिटर: एक अधिक सहज सामग्री प्रबंधन अनुभव के लिए, विज़ुअल एडिटर दस्तावेज़ीकरण यहाँ देखें।

    यह अनुभाग विशेष रूप से React अनुप्रयोगों में useI18n हुक के एकीकरण को कवर करता है, जो स्थानीयकरण प्रक्रिया को सरल बनाता है और विभिन्न स्थानीयताओं में सामग्री की संगति सुनिश्चित करता है।

    प्रलेखन इतिहास

    • 6.0.0 - 2025-06-29: useI18n हुक प्रलेखन की प्रारंभिक लेखन
    आगामी Intlayer रिलीज़ के बारे में सूचनाएं प्राप्त करें