अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके
अपने पसंदीदा AI एसिस्टेंट में Intlayer MCP सर्वर को एकीकृत करके आप सभी दस्तावेज़ को सीधे ChatGPT, DeepSeek, Cursor, VSCode से प्राप्त कर सकते हैं।
MCP सर्वर दस्तावेज़ देखेंइस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंकदस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें
React एकीकरण: useI18n हुक दस्तावेज़
यह अनुभाग React अनुप्रयोगों के भीतर useI18n हुक का उपयोग कैसे करें, इस पर विस्तृत मार्गदर्शन प्रदान करता है, जिससे कुशल सामग्री स्थानीयकरण सक्षम होता है।
React में useI18n आयात करना
useI18n हुक को संदर्भ के अनुसार React अनुप्रयोगों में निम्नलिखित तरीके से आयात और एकीकृत किया जा सकता है:
क्लाइंट कंपोनेंट्स:
typescriptकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
import { useI18n } from "react-intlayer"; // क्लाइंट-साइड React कंपोनेंट्स में उपयोग करें
सर्वर कंपोनेंट्स:
पैरामीटर
यह हुक दो पैरामीटर स्वीकार करता है:
- namespace: अनुवाद कुंजियों के स्कोप के लिए एक शब्दकोश नामस्थान।
- 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 हुक प्रलेखन की प्रारंभिक लेखन