Getting Started Internationalizing (i18n) with Intlayer and React Create App
What is Intlayer?
Intlayer एक नवाचारी, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जो आधुनिक वेब अनुप्रयोगों में बहुभाषीय समर्थन को सरल बनाने के लिए डिज़ाइन की गई है।
Intlayer के साथ, आप कर सकते हैं:
- आसान तरीके से अनुवाद प्रबंधित करें घटक स्तर पर निरूपक शब्दकोष का उपयोग करके।
- गतिकी से मेटाडेटा, मार्ग, और सामग्री का स्थानीयकरण करें।
- TypeScript समर्थन सुनिश्चित करें स्वचालित रूप से निर्मित प्रकारों के साथ, ऑटोकम्पलीशन और त्रुटि पहचान को सुधारें।
- उन्नत विशेषताओं का लाभ उठाएं, जैसे गतिशील रूप से स्थलीय पहचान और स्विच करना।
Step-by-Step Guide to Set Up Intlayer in a React Application
Step 1: Install Dependencies
आवश्यक पैकेजों को npm का उपयोग करके स्थापित करें:
1npm install intlayer react-intlayer1yarn add intlayer react-intlayer1pnpm add intlayer react-intlayerStep 2: Configuration of your project
आपके अनुप्रयोग की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:
1// intlayer.config.ts
2
3import { Locales, type IntlayerConfig } from "intlayer";
4
5const config: IntlayerConfig = {
6 internationalization: {
7 locales: [
8 Locales.ENGLISH,
9 Locales.FRENCH,
10 Locales.SPANISH,
11 // आपके अन्य स्थानीयकृत भाषाएँ
12 ],
13 defaultLocale: Locales.ENGLISH,
14 },
15};
16
17export default config;सभी उपलब्ध पैरामीटर देखने के लिए, यहाँ कॉन्फ़िगरेशन दस्तावेज देखें।
Step 3: Integrate Intlayer in Your CRA Configuration
अपने स्क्रिप्टों को react-intlayer का उपयोग करने के लिए बदलें
1 "scripts": {
2 "build": "react-intlayer build",
3 "start": "react-intlayer start",
4 "transpile": "intlayer build"
5 },नोट: react-intlayer स्क्रिप्ट craco पर आधारित हैं। आप intlayer craco प्लगइन के आधार पर अपनी स्वयं की सेटअप भी कार्यान्वित कर सकते हैं। यहाँ उदाहरण देखें。
Step 4: Declare Your Content
अपनी सामग्री शब्दकोष बनाएं और प्रबंधित करें:
1// src/app.content.tsx
2import { t, type DeclarationContent } from "intlayer";
3import { type ReactNode } from "react";
4
5const appContent = {
6 key: "app",
7 content: {
8 getStarted: t<ReactNode>({
9 en: (
10 <>
11 Edit <code>src/App.tsx</code> and save to reload
12 </>
13 ),
14 fr: (
15 <>
16 Éditez <code>src/App.tsx</code> et enregistrez pour recharger
17 </>
18 ),
19 es: (
20 <>
21 Edita <code>src/App.tsx</code> y guarda para recargar
22 </>
23 ),
24 }),
25 reactLink: {
26 href: "https://reactjs.org",
27 content: t({
28 en: "Learn React",
29 fr: "Apprendre React",
30 es: "Aprender React",
31 }),
32 },
33 },
34} satisfies DeclarationContent;
35
36export default appContent;अपने Intlayer घोषणा फ़ाइलों को घोषित करने का तरीका देखें。
Step 5: Utilize Intlayer in Your Code
अपने अनुप्रयोग में सामग्री शब्दकोष का उपयोग करें:
1import logo from "./logo.svg";
2import "./App.css";
3import { IntlayerProvider, useIntlayer } from "react-intlayer";
4import { LocaleSwitcher } from "./components/LangSwitcherDropDown";
5
6function AppContent() {
7 const content = useIntlayer("app");
8
9 return (
10 <header className="App-header">
11 <img src={logo} className="App-logo" alt="logo" />
12
13 {content.getStarted}
14 <a
15 className="App-link"
16 href={content.reactLink.href.value}
17 target="_blank"
18 rel="noopener noreferrer"
19 >
20 {content.reactLink.content}
21 </a>
22 </header>
23 );
24}
25
26function App() {
27 return (
28 <IntlayerProvider>
29 <div className="App">
30 {/* useIntlayer हुक का सही उपयोग करने के लिए, आपको एक बच्चे के घटक में अपने डेटा का उपयोग करना चाहिए */}
31 <AppContent />
32 </div>
33 <div className="absolute bottom-5 right-5 z-50">
34 <LocaleSwitcher />
35 </div>
36 </IntlayerProvider>
37 );
38}
39
40export default App;नोट: यदि आप अपनी सामग्री को string विशेषता में उपयोग करना चाहते हैं, जैसे कि alt, title, href, aria-label, आदि, तो आपको फ़ंक्शन का मान कॉल करना होगा, जैसे:
tsx1<img src={content.image.src.value} alt={content.image.value} />
(Optional) Step 6: Change the language of your content
आपकी सामग्री की भाषा बदलने के लिए, आप useLocale हुक द्वारा प्रदान की गई setLocale फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपको अनुप्रयोग की स्थानीयकरण सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।
1import { Locales } from "intlayer";
2import { useLocale } from "react-intlayer";
3
4const LocaleSwitcher = () => {
5 const { setLocale } = useLocale();
6
7 return (
8 <button onClick={() => setLocale(Locales.English)}>
9 Change Language to English
10 </button>
11 );
12};(Optional) Step 7: Add localized Routing to your application
इस चरण का उद्देश्य प्रत्येक भाषा के लिए अद्वितीय मार्ग बनाना है। यह SEO और SEO-फ्रेंडली URLs के लिए उपयोगी है। उदाहरण:
1// /dashboard
2// /es/dashboard
3// /fr/dashboardडिफ़ॉल्ट भाषी के लिए मार्गों को पूर्व-निर्धारित नहीं किया गया है। यदि आप डिफ़ॉल्ट भाषी को पूर्व-निर्धारित करना चाहते हैं, तो आप अपने कॉन्फ़िगरेशन में middleware.prefixDefault विकल्प को true पर सेट कर सकते हैं। अधिक जानकारी के लिए कॉन्फ़िगरेशन दस्तावेज़ देखें।
अपने अनुप्रयोग में स्थानीयकृत रूटिंग जोड़ने के लिए, आप एक LocaleRouter घटक बना सकते हैं जो आपके अनुप्रयोग के मार्गों को लपेटता है और स्थानीयकरण आधारित रूटिंग को संभालता है। यहाँ React Router का उपयोग करने का एक उदाहरण है:
1// आवश्यक निर्भरताएँ और फ़ंक्शन आयात करना
2import { Locales, getConfiguration, getPathWithoutLocale } from "intlayer"; // 'intlayer' से उपयोगिता फ़ंक्शन और प्रकार
3import { FC, PropsWithChildren } from "react"; // कार्यात्मक घटकों और प्रॉप्स के लिए React प्रकार
4import { IntlayerProvider } from "react-intlayer"; // अंतर्राष्ट्रीयकरण संदर्भ के लिए प्रदाता
5import {
6 BrowserRouter,
7 Routes,
8 Route,
9 useParams,
10 Navigate,
11 useLocation,
12} from "react-router-dom"; // नेविगेशन प्रबंधित करने के लिए राउटर घटक
13
14// Intlayer से कॉन्फ़िगरेशन का विघटन करना
15const { internationalization, middleware } = getConfiguration();
16const { locales, defaultLocale } = internationalization;
17
18/**
19 * एक घटक जो स्थानीयकरण को संभालता है और बच्चों को उपयुक्त स्थानीय संदर्भ के साथ लपेटता है।
20 * यह URL-आधारित स्थानीय पहचान और प्रमाणीकरण का प्रबंधन करता है।
21 */
22const AppLocalized: FC<PropsWithChildren> = ({ children }) => {
23 const path = useLocation().pathname; // वर्तमान URL पथ प्राप्त करना
24 const { locale } = useParams<{ locale: Locales }>(); // URL से स्थानीयता पैरामीटर निकालना
25
26 // वर्तमान स्थानीयता निर्धारित करना, यदि प्रदान नहीं की गई तो डिफ़ॉल्ट पर वापस जाना
27 const currentLocale = locale ?? defaultLocale;
28
29 // स्थानीयता उपसर्ग को पथ से हटाना ताकि एक आधार पथ का निर्माण हो सके
30 const pathWithoutLocale = removeLocaleFromUrl(
31 path // वर्तमान URL पथ
32 );
33
34 /**
35 * यदि middleware.prefixDefault सही है, तो डिफ़ॉल्ट स्थानीयता हमेशा उपसर्ग होनी चाहिए।
36 */
37 if (middleware.prefixDefault) {
38 // स्थानीयता को मान्य करना
39 if (!locale || !locales.includes(locale)) {
40 // अपडेटेड पथ के साथ डिफ़ॉल्ट स्थानीयता की ओर पुनः निर्देशित करें
41 return (
42 <Navigate
43 to={`/${defaultLocale}/${pathWithoutLocale}`}
44 replace // वर्तमान इतिहास प्रविष्टि को नई प्रविष्टि से बदलें
45 />
46 );
47 }
48
49 // बच्चों को IntlayerProvider के साथ लपेटें और वर्तमान स्थानीयता सेट करें
50 return (
51 <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
52 );
53 } else {
54 /**
55 * जब middleware.prefixDefault गलत है, डिफ़ॉल्ट स्थानीयता को उपसर्गित नहीं किया गया है।
56 * सुनिश्चित करें कि वर्तमान स्थानीयता मान्य है और डिफ़ॉल्ट स्थानीयता नहीं है।
57 */
58 if (
59 currentLocale.toString() !== defaultLocale.toString() &&
60 !locales
61 .filter(
62 (locale) => locale.toString() !== defaultLocale.toString() // डिफ़ॉल्ट स्थानीयता को छोड़ें
63 )
64 .includes(currentLocale) // जांचें कि क्या वर्तमान स्थानीयता मान्य स्थानीयताओं की सूची में है
65 ) {
66 // बिना स्थानीयता उपसर्ग वाले पथ की ओर पुनः निर्देशित करें
67 return <Navigate to={pathWithoutLocale} replace />;
68 }
69
70 // बच्चों को IntlayerProvider के साथ लपेटें और वर्तमान स्थानीयता सेट करें
71 return (
72 <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
73 );
74 }
75};
76
77/**
78 * एक राउटर घटक जो स्थानीय-विशिष्ट मार्ग सेट करता है।
79 * यह नेविगेशन का प्रबंधन करने और स्थानीय घटकों को प्रस्तुत करने के लिए React Router का उपयोग करता है।
80 */
81export const LocaleRouter: FC<PropsWithChildren> = ({ children }) => (
82 <BrowserRouter>
83 <Routes>
84 <Route
85 // मार्ग पैटर्न जो स्थानीयता को कैप्चर करता है (जैसे, /en/, /fr/) और सभी आगे के पथों से मेल खाता है
86 path="/:locale/*"
87 element={<AppLocalized>{children}</AppLocalized>} // बच्चों को स्थानीय प्रबंधन के साथ लपेटता है
88 />
89
90 {
91 // यदि डिफ़ॉल्ट स्थानीयता को पूर्व-निर्धारित करना बंद कर दिया गया है, तो बच्चों को सीधे रूट पथ पर प्रस्तुत करें
92 !middleware.prefixDefault && (
93 <Route
94 path="*"
95 element={<AppLocalized>{children}</AppLocalized>} // बच्चों को स्थानीय प्रबंधन के साथ लपेटता है
96 />
97 )
98 }
99 </Routes>
100 </BrowserRouter>
101);(Optional) Step 8: Change the URL when the locale changes
जब स्थानीयता बदलती है, तो URL बदलने के लिए, आप useLocale हुक द्वारा प्रदान किए गए onLocaleChange प्रॉप का उपयोग कर सकते हैं। इसके समानांतर, आप react-router-dom से useLocation और useNavigate हुक का उपयोग करके URL पथ को अपडेट कर सकते हैं।
1import { Locales, getLocalizedUrl } from "intlayer";
2import { useLocale } from "react-intlayer";
3import { useLocation, useNavigate } from "react-router-dom";
4
5const LocaleSwitcher = () => {
6 const location = useLocation(); // वर्तमान URL पथ प्राप्त करना। उदाहरण: /fr/about
7 const navigate = useNavigate();
8
9 const changeUrl = (locale: Locales) => {
10 // अपडेटेड स्थानीयता के साथ URL का निर्माण करना
11 // उदाहरण: स्पेनिश में स्थानीयता सेट होने पर /es/about
12 const pathWithLocale = getLocalizedUrl(location.pathname, locale);
13
14 // URL पथ को अपडेट करें
15 navigate(pathWithLocale);
16 };
17
18 const { setLocale } = useLocale({
19 onLocaleChange: changeUrl,
20 });
21
22 return (
23 <button onClick={() => setLocale(Locales.English)}>
24 Change Language to English
25 </button>
26 );
27};Configure TypeScript
Intlayer TypeScript के लाभ प्राप्त करने के लिए मॉड्यूल संवर्धन का उपयोग करता है और आपके कोडबेस को मजबूत बनाता है।
सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में स्वचालित रूप से निर्मित प्रकार शामिल हैं।
1// tsconfig.json
2
3{
4 // आपकी कस्टम कॉन्फ़िगरेशन
5 include: [
6 "src",
7 "types", // <- स्वचालित निर्मित प्रकारों को शामिल करें
8 ],
9}Git Configuration
Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करना рекоменд किया जाता है। इससे आप उन्हें अपने Git रिपोजिटरी में कमिट करने से बच सकते हैं।
इसके लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
1# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें
2.intlayerअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंक