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

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

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

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

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

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

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

  const { useI18n } = require("react-intlayer"); // क्लाइंट-साइड React कंपोनेंट्स में उपयोग करें

• सर्वर कंपोनेंट्स:

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

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

  const { useI18n } = require("react-intlayer/server"); // सर्वर-साइड React कंपोनेंट्स में उपयोग करें

पैरामीटर

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

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

शब्दकोश

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

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

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

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>
    </>
  );
};

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>
  );
};

import { useI18n } from "react-intlayer/server";

const ServerComponentExample = () => {
  const t = useI18n("server-component");

  return (
    <div>
      <h1>{t("title")}</h1> {/* शीर्षक दिखाएं */}
      <p>{t("description")}</p> {/* विवरण दिखाएं */}
    </div>
  );
};

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

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

<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 हुक प्रलेखन की प्रारंभिक लेखन