@intlayer/docs 9.0.0-canary.5 → 9.0.0-canary.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/ar/intlayer_with_react_native+expo.md +56 -79
- package/docs/ar/packages/react-native-intlayer/exports.md +48 -14
- package/docs/de/intlayer_with_react_native+expo.md +50 -68
- package/docs/de/packages/react-native-intlayer/exports.md +47 -13
- package/docs/en/intlayer_with_react_native+expo.md +14 -18
- package/docs/en/packages/react-native-intlayer/exports.md +47 -13
- package/docs/en-GB/intlayer_with_react_native+expo.md +40 -94
- package/docs/en-GB/packages/react-native-intlayer/exports.md +51 -18
- package/docs/es/intlayer_with_react_native+expo.md +43 -80
- package/docs/es/packages/react-native-intlayer/exports.md +47 -13
- package/docs/fr/intlayer_with_react_native+expo.md +54 -68
- package/docs/fr/packages/react-native-intlayer/exports.md +47 -13
- package/docs/hi/intlayer_with_react_native+expo.md +90 -87
- package/docs/hi/packages/react-native-intlayer/exports.md +48 -14
- package/docs/id/intlayer_with_react_native+expo.md +45 -33
- package/docs/id/packages/react-native-intlayer/exports.md +47 -13
- package/docs/it/intlayer_with_react_native+expo.md +32 -72
- package/docs/it/packages/react-native-intlayer/exports.md +47 -13
- package/docs/ja/intlayer_with_react_native+expo.md +98 -137
- package/docs/ja/packages/react-native-intlayer/exports.md +47 -14
- package/docs/ko/intlayer_with_react_native+expo.md +231 -29
- package/docs/ko/packages/react-native-intlayer/exports.md +48 -14
- package/docs/pl/intlayer_with_react_native+expo.md +75 -46
- package/docs/pl/packages/react-native-intlayer/exports.md +47 -13
- package/docs/pt/intlayer_with_react_native+expo.md +38 -75
- package/docs/pt/packages/react-native-intlayer/exports.md +47 -13
- package/docs/ru/intlayer_with_react_native+expo.md +71 -60
- package/docs/ru/packages/react-native-intlayer/exports.md +49 -16
- package/docs/tr/intlayer_with_react_native+expo.md +30 -56
- package/docs/tr/packages/react-native-intlayer/exports.md +48 -15
- package/docs/uk/intlayer_with_react_native+expo.md +64 -52
- package/docs/uk/packages/react-native-intlayer/exports.md +47 -13
- package/docs/vi/intlayer_with_react_native+expo.md +43 -32
- package/docs/vi/packages/react-native-intlayer/exports.md +47 -13
- package/docs/zh/intlayer_with_react_native+expo.md +216 -82
- package/docs/zh/packages/react-native-intlayer/exports.md +48 -14
- package/package.json +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-06-18
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: "Expo + React Native i18n - अपने ऐप को अनुवाद करने का पूर्ण गाइड"
|
|
5
5
|
description: "अब i18next की जरूरत नहीं। 2026 में Expo + React Native ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।"
|
|
6
6
|
keywords:
|
|
@@ -17,12 +17,18 @@ slugs:
|
|
|
17
17
|
applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
|
|
18
18
|
applicationShowcase: https://intlayer-react-native.vercel.app
|
|
19
19
|
history:
|
|
20
|
+
- version: 9.0.0
|
|
21
|
+
date: 2026-06-25
|
|
22
|
+
changes: "Providers और hooks को सीधे react-native-intlayer से import करें; react-intlayer अब सीधी dependency के रूप में आवश्यक नहीं है"
|
|
20
23
|
- version: 8.9.0
|
|
21
24
|
date: 2026-05-04
|
|
22
25
|
changes: "सॉलिड useIntlayer API उपयोग को सीधे प्रॉपर्टी एक्सेस में अपडेट करें"
|
|
23
26
|
- version: 7.5.9
|
|
24
27
|
date: 2025-12-30
|
|
25
28
|
changes: "init कमांड जोड़ें"
|
|
29
|
+
- version: 6.1.6
|
|
30
|
+
date: 2025-10-02
|
|
31
|
+
changes: "डीबग अनुभाग जोड़ें"
|
|
26
32
|
- version: 5.5.10
|
|
27
33
|
date: 2025-06-29
|
|
28
34
|
changes: "प्रारंभिक इतिहास"
|
|
@@ -37,7 +43,7 @@ author: aymericzip
|
|
|
37
43
|
<iframe
|
|
38
44
|
src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
|
|
39
45
|
className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
|
|
40
|
-
title="Demo CodeSandbox - Intlayer"
|
|
46
|
+
title="Demo CodeSandbox - Intlayer का उपयोग करके अपने एप्लिकेशन को अंतर्राष्ट्रीयकृत कैसे करें"
|
|
41
47
|
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
|
|
42
48
|
loading="lazy"
|
|
43
49
|
/>
|
|
@@ -56,39 +62,58 @@ author: aymericzip
|
|
|
56
62
|
</Tab>
|
|
57
63
|
</Tabs>
|
|
58
64
|
|
|
59
|
-
|
|
65
|
+
## विषय सूची
|
|
66
|
+
|
|
67
|
+
<TOC/>
|
|
68
|
+
|
|
69
|
+
## विकल्पों पर Intlayer क्यों?
|
|
70
|
+
|
|
71
|
+
`react-native-localize` या `i18next` जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
|
|
60
72
|
|
|
61
|
-
|
|
73
|
+
<AccordionGroup>
|
|
62
74
|
|
|
63
|
-
|
|
75
|
+
<Accordion header="पूर्ण React Native कवरेज">
|
|
64
76
|
|
|
65
|
-
|
|
77
|
+
Intlayer को **घटक-स्तरीय सामग्री स्कोपिंग**, **TypeScript समर्थन**, और मोबाइल ऐप्स में अंतर्राष्ट्रीयकरण (i18n) को बढ़ाने के लिए आवश्यक सभी सुविधाओं की पेशकश करके React Native और Expo के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।
|
|
66
78
|
|
|
67
|
-
|
|
79
|
+
</Accordion>
|
|
68
80
|
|
|
69
|
-
|
|
81
|
+
<Accordion header="रखरखाव">
|
|
70
82
|
|
|
71
83
|
आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए **रखरखाव की सुविधा प्रदान करता है**। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer **पूरी तरह से टाइप किया गया** है।
|
|
72
84
|
|
|
73
|
-
|
|
85
|
+
</Accordion>
|
|
86
|
+
|
|
87
|
+
<Accordion header="AI एजेंट">
|
|
88
|
+
|
|
89
|
+
सामग्री का सह-स्थानीकरण **बड़े भाषा मॉडल (LLM) द्वारा आवश्यक संदर्भ को कम करता है**। Intlayer टूल के एक सूट के साथ भी आता है, जैसे **CLI** ताकि लापता अनुवादों का परीक्षण किया जा सके,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, और **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।
|
|
90
|
+
|
|
91
|
+
</Accordion>
|
|
92
|
+
|
|
93
|
+
<Accordion header="स्वचालन">
|
|
74
94
|
|
|
75
|
-
|
|
95
|
+
अपने AI प्रदाता की कीमत पर अपनी पसंद के LLM का उपयोग करके अपने CI/CD पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। Intlayer सामग्री निष्कर्षण को स्वचालित करने के लिए एक **कंपाइलर** के साथ-साथ **पृष्ठभूमि में अनुवाद** में मदद करने के लिए एक [वेब प्लेटफ़ॉर्म](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) भी प्रदान करता है।
|
|
76
96
|
|
|
77
|
-
|
|
97
|
+
</Accordion>
|
|
78
98
|
|
|
79
|
-
|
|
99
|
+
<Accordion header="प्रदर्शन">
|
|
80
100
|
|
|
81
|
-
|
|
101
|
+
बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। Intlayer बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।
|
|
82
102
|
|
|
83
|
-
|
|
103
|
+
</Accordion>
|
|
84
104
|
|
|
85
|
-
|
|
105
|
+
<Accordion header="बिना डेव के स्केलिंग">
|
|
86
106
|
|
|
87
|
-
सिर्फ एक i18n समाधान से अधिक, Intlayer एक **स्व-होस्टेड [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** और एक **[पूर्ण
|
|
107
|
+
सिर्फ एक i18n समाधान से अधिक, Intlayer एक **स्व-होस्टेड [विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** और एक **[पूर्ण CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** प्रदान करता है आपकी बहुभाषी सामग्री को **वास्तविक समय** में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
|
|
88
108
|
|
|
89
|
-
|
|
109
|
+
</Accordion>
|
|
90
110
|
|
|
91
|
-
|
|
111
|
+
<Accordion header="बंडल का आकार">
|
|
112
|
+
|
|
113
|
+
अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। Intlayer **आपके बंडल और दृश्य आकार को 50% तक कम करने** में मदद करता है।
|
|
114
|
+
|
|
115
|
+
</Accordion>
|
|
116
|
+
</AccordionGroup>
|
|
92
117
|
|
|
93
118
|
<Steps>
|
|
94
119
|
|
|
@@ -96,84 +121,57 @@ GitHub पर [एप्लिकेशन टेम्पलेट](https://git
|
|
|
96
121
|
|
|
97
122
|
GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/intlayer-react-native-template) देखें।
|
|
98
123
|
|
|
99
|
-
अपने
|
|
124
|
+
अपने React Native प्रोजेक्ट से, निम्नलिखित पैकेज स्थापित करें:
|
|
100
125
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
एनपीएम इंस्टॉल--सेव-देव रिएक्ट-नेटिव-इंटलेयर
|
|
104
|
-
एनपीएक्स इंटलेयर इनिट
|
|
126
|
+
```bash packageManager="npm"
|
|
127
|
+
npx intlayer-cli init --interactive
|
|
105
128
|
```
|
|
106
129
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
पीएनपीएम ऐड--सेव-देव रिएक्ट-नेटिव-इंटलेयर
|
|
110
|
-
पीएनपीएम इंटलेयर इनिट
|
|
130
|
+
```bash packageManager="pnpm"
|
|
131
|
+
pnpm dlx intlayer-cli init --interactive
|
|
111
132
|
```
|
|
112
133
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
यार्न ऐड--सेव-डेव रिएक्ट-नेटिव-इंटलेयर
|
|
116
|
-
यार्न इंटरलेयर init
|
|
134
|
+
```bash packageManager="yarn"
|
|
135
|
+
yarn dlx intlayer-cli init --interactive
|
|
117
136
|
```
|
|
118
137
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
बन ऐड--देव रिएक्ट-नेटिव-इंटलेयर
|
|
122
|
-
बन एक्स इंटरलेयर इनिट
|
|
138
|
+
```bash packageManager="bun"
|
|
139
|
+
bunx intlayer-cli init --interactive
|
|
123
140
|
```
|
|
124
141
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
- **इंटलेयर**
|
|
128
|
-
कॉन्फ़िगरेशन, शब्दकोश सामग्री, प्रकार निर्माण और सीएलआई कमांड के लिए कोर i18n टूलकिट।
|
|
142
|
+
> `--interactive` फ्लैग वैकल्पिक है। यदि आप AI एजेंट हैं तो `intlayer-cli init` का उपयोग करें।
|
|
129
143
|
|
|
130
|
-
|
|
131
|
-
रिएक्ट एकीकरण जो संदर्भ प्रदाता और रिएक्ट हुक प्रदान करता है जिसका उपयोग आप रिएक्ट नेटिव में स्थानों को प्राप्त करने और स्विच करने के लिए करेंगे।
|
|
132
|
-
|
|
133
|
-
- **प्रतिक्रिया-मूल-इंटलेयर**
|
|
134
|
-
रिएक्ट नेटिव इंटीग्रेशन जो रिएक्ट नेटिव बंडलर के साथ इंटलेयर को एकीकृत करने के लिए मेट्रो प्लगइन प्रदान करता है।
|
|
135
|
-
|
|
136
|
-
---
|
|
137
|
-
|
|
138
|
-
</Step>
|
|
139
|
-
|
|
140
|
-
<Step number={2} title="निर्भरता स्थापित करें">
|
|
141
|
-
|
|
142
|
-
अपने React Native प्रोजेक्ट से, निम्नलिखित पैकेज स्थापित करें:
|
|
144
|
+
> यह कमांड आपके environment का पता लगाएगा और आवश्यक पैकेज इंस्टॉल करेगा। उदाहरण के लिए:
|
|
143
145
|
|
|
144
146
|
```bash packageManager="npm"
|
|
145
|
-
|
|
146
|
-
npm install intlayer react-intlayer
|
|
147
|
-
npm install --save-dev react-native-intlayer
|
|
147
|
+
npm install intlayer react-native-intlayer
|
|
148
148
|
```
|
|
149
149
|
|
|
150
150
|
```bash packageManager="pnpm"
|
|
151
|
-
pnpm add intlayer react-intlayer
|
|
152
|
-
pnpm add --save-dev react-native-intlayer
|
|
153
|
-
pnpm intlayer init
|
|
151
|
+
pnpm add intlayer react-native-intlayer
|
|
154
152
|
```
|
|
155
153
|
|
|
156
154
|
```bash packageManager="yarn"
|
|
157
|
-
yarn add intlayer react-intlayer
|
|
158
|
-
|
|
155
|
+
yarn add intlayer react-native-intlayer
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
```bash packageManager="bun"
|
|
159
|
+
bun add intlayer react-native-intlayer
|
|
159
160
|
```
|
|
160
161
|
|
|
161
162
|
### पैकेज
|
|
162
163
|
|
|
163
164
|
- **intlayer**
|
|
164
|
-
कॉन्फ़िगरेशन, शब्दकोश सामग्री,
|
|
165
|
-
|
|
166
|
-
- **react-intlayer**
|
|
167
|
-
React एकीकरण जो कॉन्टेक्स्ट प्रदाताओं और React हुक्स प्रदान करता है, जिन्हें आप React Native में स्थानीयकरण प्राप्त करने और स्विच करने के लिए उपयोग करेंगे।
|
|
165
|
+
कॉन्फ़िगरेशन, शब्दकोश सामग्री, प्रकार निर्माण और CLI कमांड के लिए कोर i18n टूलकिट।
|
|
168
166
|
|
|
169
167
|
- **react-native-intlayer**
|
|
170
|
-
React Native एकीकरण जो
|
|
168
|
+
React Native एकीकरण जो कॉन्टेक्स्ट प्रदाताओं और React हुक्स प्रदान करता है जिनका उपयोग आप locale प्राप्त करने और स्विच करने के लिए करेंगे, React Native polyfills, और React Native bundler के साथ Intlayer को एकीकृत करने के लिए Metro प्लगइन। यह `react-intlayer` से सब कुछ re-export करता है, इसलिए React Native ऐप में आपको केवल इसी एकल पैकेज की आवश्यकता है।
|
|
171
169
|
|
|
172
170
|
---
|
|
173
171
|
|
|
174
172
|
</Step>
|
|
175
173
|
|
|
176
|
-
<Step number={
|
|
174
|
+
<Step number={2} title="Intlayer कॉन्फ़िग बनाएं">
|
|
177
175
|
|
|
178
176
|
अपने प्रोजेक्ट रूट (या कहीं भी सुविधाजनक) में, एक **Intlayer कॉन्फ़िग** फ़ाइल बनाएं। यह कुछ इस प्रकार दिख सकती है:
|
|
179
177
|
|
|
@@ -203,13 +201,13 @@ export default config;
|
|
|
203
201
|
- अपने **समर्थित स्थानीय भाषाओं की सूची** कॉन्फ़िगर करें।
|
|
204
202
|
- एक **डिफ़ॉल्ट** स्थानीय भाषा सेट करें।
|
|
205
203
|
- बाद में, आप अधिक उन्नत विकल्प जोड़ सकते हैं (जैसे, लॉग्स, कस्टम कंटेंट डायरेक्टरीज़, आदि)।
|
|
206
|
-
- अधिक जानकारी के लिए [Intlayer कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
|
|
204
|
+
- अधिक जानकारी के लिए [Intlayer कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) देखें।
|
|
207
205
|
|
|
208
206
|
</Step>
|
|
209
207
|
|
|
210
|
-
<Step number={
|
|
208
|
+
<Step number={3} title="Metro प्लगइन जोड़ें">
|
|
211
209
|
|
|
212
|
-
|
|
210
|
+
Metro React Native के लिए एक बंडलर है। यह `react-native init` कमांड से बनाए गए React Native प्रोजेक्ट्स के लिए डिफ़ॉल्ट बंडलर है। Intlayer को Metro के साथ उपयोग करने के लिए, आपको अपने `metro.config.js` फ़ाइल में प्लगइन जोड़ना होगा:
|
|
213
211
|
|
|
214
212
|
```js fileName="metro.config.js"
|
|
215
213
|
const { getDefaultConfig } = require("expo/metro-config");
|
|
@@ -222,13 +220,18 @@ module.exports = (async () => {
|
|
|
222
220
|
})();
|
|
223
221
|
```
|
|
224
222
|
|
|
223
|
+
> नोट: `configMetroIntlayer` एक promise फ़ंक्शन है। यदि आप इसे synchronously उपयोग करना चाहते हैं, या IIFE (Immediately Invoked Function Expression) से बचना चाहते हैं, तो इसके बजाय `configMetroIntlayerSync` का उपयोग करें।
|
|
224
|
+
> नोट: `configMetroIntlayerSync` सर्वर स्टार्ट पर intlayer dictionaries बनाने की अनुमति नहीं देता
|
|
225
|
+
|
|
225
226
|
</Step>
|
|
226
227
|
|
|
227
|
-
<Step number={
|
|
228
|
+
<Step number={4} title="Intlayer प्रदाता जोड़ें">
|
|
228
229
|
|
|
229
|
-
अपने एप्लिकेशन में उपयोगकर्ता की भाषा को सिंक्रनाइज़ रखने के लिए, आपको अपने रूट कंपोनेंट को `react-intlayer
|
|
230
|
+
अपने एप्लिकेशन में उपयोगकर्ता की भाषा को सिंक्रनाइज़ रखने के लिए, आपको अपने रूट कंपोनेंट को `react-native-intlayer` से `IntlayerProvider` कंपोनेंट के साथ रैप करना होगा।
|
|
230
231
|
|
|
231
|
-
> `react-intlayer`
|
|
232
|
+
> हमेशा `react-native-intlayer` से import करें। इसका `IntlayerProvider` Intlayer द्वारा उपयोग की जाने वाली web API के लिए polyfills शामिल करता है, और यह पैकेज `react-intlayer` से सभी hooks और utilities को re-export करता है।
|
|
233
|
+
|
|
234
|
+
इसके अलावा, आपको यह सुनिश्चित करने के लिए कि Intlayer सही ढंग से काम कर सके, अपने `index.js` फ़ाइल में `intlayerPolyfill` फ़ंक्शन जोड़ना होगा।
|
|
232
235
|
|
|
233
236
|
```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
|
|
234
237
|
import { Stack } from "expo-router";
|
|
@@ -253,7 +256,7 @@ export default RootLayout;
|
|
|
253
256
|
|
|
254
257
|
</Step>
|
|
255
258
|
|
|
256
|
-
<Step number={
|
|
259
|
+
<Step number={5} title="अपनी सामग्री घोषित करें">
|
|
257
260
|
|
|
258
261
|
प्रोजेक्ट में कहीं भी **content declaration** फाइलें बनाएं (आमतौर पर `src/` के अंदर), Intlayer द्वारा समर्थित किसी भी एक्सटेंशन फॉर्मेट का उपयोग करते हुए:
|
|
259
262
|
|
|
@@ -318,13 +321,13 @@ export default homeScreenContent;
|
|
|
318
321
|
}
|
|
319
322
|
```
|
|
320
323
|
|
|
321
|
-
> सामग्री घोषणाओं के विवरण के लिए, देखें [Intlayer की सामग्री दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
|
|
324
|
+
> सामग्री घोषणाओं के विवरण के लिए, देखें [Intlayer की सामग्री दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)।
|
|
322
325
|
|
|
323
326
|
---
|
|
324
327
|
|
|
325
328
|
</Step>
|
|
326
329
|
|
|
327
|
-
<Step number={
|
|
330
|
+
<Step number={6} title="अपने घटकों में Intlayer का उपयोग करें">
|
|
328
331
|
|
|
329
332
|
स्थानीयकृत सामग्री प्राप्त करने के लिए चाइल्ड कॉम्पोनेंट्स में `useIntlayer` हुक का उपयोग करें।
|
|
330
333
|
|
|
@@ -332,7 +335,7 @@ export default homeScreenContent;
|
|
|
332
335
|
|
|
333
336
|
```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
|
|
334
337
|
import { Image, StyleSheet, Platform } from "react-native";
|
|
335
|
-
import { useIntlayer } from "react-intlayer";
|
|
338
|
+
import { useIntlayer } from "react-native-intlayer";
|
|
336
339
|
import { HelloWave } from "@/components/HelloWave";
|
|
337
340
|
import ParallaxScrollView from "@/components/ParallaxScrollView";
|
|
338
341
|
import { ThemedText } from "@/components/ThemedText";
|
|
@@ -362,9 +365,9 @@ const HomeScreen = (): FC => {
|
|
|
362
365
|
|
|
363
366
|
const styles = StyleSheet.create({
|
|
364
367
|
titleContainer: {
|
|
365
|
-
flexDirection: "row",
|
|
366
|
-
alignItems: "center",
|
|
367
|
-
gap: 8,
|
|
368
|
+
flexDirection: "row",
|
|
369
|
+
alignItems: "center",
|
|
370
|
+
gap: 8,
|
|
368
371
|
},
|
|
369
372
|
});
|
|
370
373
|
|
|
@@ -373,13 +376,13 @@ export default HomeScreen;
|
|
|
373
376
|
|
|
374
377
|
> जब आप `content.someKey` का उपयोग स्ट्रिंग-आधारित प्रॉप्स में करते हैं (जैसे, किसी बटन के `title` या `Text` कंपोनेंट के `children` में), तो वास्तविक स्ट्रिंग प्राप्त करने के लिए **`content.someKey.value` कॉल करें**।
|
|
375
378
|
|
|
376
|
-
> यदि आपका ऐप पहले से मौजूद है, तो आप हजारों घटकों को एक सेकंड में बदलने के लिए [Intlayer कंपाइलर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
|
|
379
|
+
> यदि आपका ऐप पहले से मौजूद है, तो आप हजारों घटकों को एक सेकंड में बदलने के लिए [Intlayer कंपाइलर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md) को [एक्सट्रैक्ट कमांड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md) के साथ उपयोग कर सकते हैं।
|
|
377
380
|
|
|
378
381
|
---
|
|
379
382
|
|
|
380
383
|
</Step>
|
|
381
384
|
|
|
382
|
-
<Step number={
|
|
385
|
+
<Step number={7} title="ऐप का लोकल बदलें" isOptional={true}>
|
|
383
386
|
|
|
384
387
|
अपने कंपोनेंट्स के भीतर से लोकल बदलने के लिए, आप `useLocale` हुक के `setLocale` मेथड का उपयोग कर सकते हैं:
|
|
385
388
|
|
|
@@ -387,7 +390,7 @@ export default HomeScreen;
|
|
|
387
390
|
import { type FC } from "react";
|
|
388
391
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
389
392
|
import { getLocaleName } from "intlayer";
|
|
390
|
-
import { useLocale } from "react-intlayer";
|
|
393
|
+
import { useLocale } from "react-native-intlayer";
|
|
391
394
|
|
|
392
395
|
export const LocaleSwitcher: FC = () => {
|
|
393
396
|
const { setLocale, availableLocales } = useLocale();
|
|
@@ -430,7 +433,7 @@ const styles = StyleSheet.create({
|
|
|
430
433
|
|
|
431
434
|
यह उन सभी कंपोनेंट्स को पुनः रेंडर करता है जो Intlayer सामग्री का उपयोग करते हैं, अब नए लोकल के लिए अनुवाद दिखाते हुए।
|
|
432
435
|
|
|
433
|
-
> अधिक जानकारी के लिए [`useLocale` दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
|
|
436
|
+
> अधिक जानकारी के लिए [`useLocale` दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md) देखें।
|
|
434
437
|
|
|
435
438
|
</Step>
|
|
436
439
|
|
|
@@ -489,9 +492,9 @@ Intlayer के साथ अपने विकास अनुभव को
|
|
|
489
492
|
|
|
490
493
|
## आगे बढ़ें
|
|
491
494
|
|
|
492
|
-
- **विज़ुअल एडिटर**: अनुवादों को दृश्य रूप से प्रबंधित करने के लिए [Intlayer विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
|
|
493
|
-
- **CMS एकीकरण**: आप अपने शब्दकोश की सामग्री को एक [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
|
|
494
|
-
- **CLI कमांड्स**: ऐसे कार्यों के लिए [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
|
|
495
|
+
- **विज़ुअल एडिटर**: अनुवादों को दृश्य रूप से प्रबंधित करने के लिए [Intlayer विज़ुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) का उपयोग करें।
|
|
496
|
+
- **CMS एकीकरण**: आप अपने शब्दकोश की सामग्री को एक [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) से बाहरी रूप से प्रबंधित और प्राप्त भी कर सकते हैं।
|
|
497
|
+
- **CLI कमांड्स**: ऐसे कार्यों के लिए [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md) का अन्वेषण करें जैसे **अनुवाद निकालना** या **गुम हुए कुंजियों की जांच करना**।
|
|
495
498
|
|
|
496
499
|
**Intlayer** के माध्यम से पूरी तरह से सशक्त i18n के साथ अपने **React Native** ऐप्स का निर्माण करें!
|
|
497
500
|
|
|
@@ -505,7 +508,7 @@ Intlayer मुख्य रूप से Web Intl API को target करत
|
|
|
505
508
|
|
|
506
509
|
Checklist:
|
|
507
510
|
|
|
508
|
-
- `intlayer
|
|
511
|
+
- `intlayer` और `react-native-intlayer` के नवीनतम versions का उपयोग करें।
|
|
509
512
|
- Intlayer polyfill को enable करें।
|
|
510
513
|
- यदि आप `getLocaleName` या अन्य Intl-API-based utilities का उपयोग करते हैं, तो इन polyfills को जल्दी import करें (उदाहरण के लिए `index.js` या `App.tsx` में):
|
|
511
514
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-01-21
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-06-25
|
|
4
4
|
title: react-native-intlayer पैकेज दस्तावेज़
|
|
5
|
-
description: Intlayer के लिए React Native समर्थन, जो
|
|
5
|
+
description: Intlayer के लिए React Native समर्थन, जो providers, hooks, polyfills और Metro कॉन्फ़िगरेशन प्रदान करता है।
|
|
6
6
|
keywords:
|
|
7
7
|
- react-native-intlayer
|
|
8
8
|
- react-native
|
|
@@ -14,15 +14,20 @@ slugs:
|
|
|
14
14
|
- react-native-intlayer
|
|
15
15
|
- exports
|
|
16
16
|
history:
|
|
17
|
+
- version: 9.0.0
|
|
18
|
+
date: 2026-06-25
|
|
19
|
+
changes: "पूर्ण react-intlayer API (hooks, utilities, format/html/markdown subpaths) को re-export करें ताकि React Native ऐप केवल react-native-intlayer पर निर्भर रहे"
|
|
17
20
|
- version: 8.0.0
|
|
18
21
|
date: 2026-01-21
|
|
19
|
-
changes: "
|
|
22
|
+
changes: "सभी exports के लिए एकीकृत दस्तावेज़ीकरण"
|
|
20
23
|
author: aymericzip
|
|
21
24
|
---
|
|
22
25
|
|
|
23
26
|
# react-native-intlayer पैकेज
|
|
24
27
|
|
|
25
|
-
`react-native-intlayer` पैकेज आवश्यक टूल्स प्रदान करता है ताकि Intlayer को React Native एप्लिकेशन्स में एकीकृत किया जा सके।
|
|
28
|
+
`react-native-intlayer` पैकेज आवश्यक टूल्स प्रदान करता है ताकि Intlayer को React Native एप्लिकेशन्स में एकीकृत किया जा सके। यह `react-intlayer` की पूर्ण API (hooks और utilities) को React Native-ready `IntlayerProvider` के साथ re-export करता है, साथ ही React Native के लिए आवश्यक polyfills और Metro कॉन्फ़िगरेशन भी प्रदान करता है।
|
|
29
|
+
|
|
30
|
+
> React Native ऐप में, **सब कुछ** `react-native-intlayer` से import करें। आपको `react-intlayer` को सीधे install या import करने की आवश्यकता नहीं है।
|
|
26
31
|
|
|
27
32
|
## इंस्टॉलेशन
|
|
28
33
|
|
|
@@ -34,14 +39,30 @@ npm install react-native-intlayer
|
|
|
34
39
|
|
|
35
40
|
### प्रोवाइडर
|
|
36
41
|
|
|
37
|
-
| Component | विवरण
|
|
38
|
-
| ------------------ |
|
|
39
|
-
| `IntlayerProvider` | Provider component जो आपके एप्लिकेशन को रैप करता है और Intlayer context प्रदान करता है। |
|
|
42
|
+
| Component | विवरण |
|
|
43
|
+
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
|
44
|
+
| `IntlayerProvider` | Provider component जो आपके एप्लिकेशन को रैप करता है और Intlayer context प्रदान करता है। आवश्यक polyfills को स्वचालित रूप से लागू करता है। |
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Hooks और Utilities
|
|
51
|
+
|
|
52
|
+
ये `react-intlayer` से re-export किए जाते हैं, इसलिए आप इन्हें सीधे `react-native-intlayer` से import कर सकते हैं:
|
|
40
53
|
|
|
41
|
-
|
|
54
|
+
| Export | विवरण |
|
|
55
|
+
| ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
|
|
56
|
+
| `useIntlayer` | किसी dictionary key के लिए localized content एक्सेस करें। |
|
|
57
|
+
| `useLocale` | वर्तमान locale को पढ़ें और बदलें। |
|
|
58
|
+
| `useDictionary`, `useDictionaryAsync`, `useDictionaryDynamic`, `useLoadDynamic` | विभिन्न तरीकों से dictionary content लोड करें। |
|
|
59
|
+
| `useI18n` | i18next-compatible hook। |
|
|
60
|
+
| `t` | Inline translation helper। |
|
|
61
|
+
| `getIntlayer`, `getDictionary` | Imperative content getters। |
|
|
62
|
+
| `localeCookie`, `localeInStorage`, `setLocaleCookie`, `setLocaleInStorage`, `useLocaleCookie`, `useLocaleStorage` | Locale persistence helpers। |
|
|
42
63
|
|
|
43
64
|
```tsx
|
|
44
|
-
import "react-native-intlayer";
|
|
65
|
+
import { useIntlayer, useLocale, t } from "react-native-intlayer";
|
|
45
66
|
```
|
|
46
67
|
|
|
47
68
|
### पॉलीफिल
|
|
@@ -50,10 +71,25 @@ import "react-native-intlayer";
|
|
|
50
71
|
| ------------------ | ----------------------------------------------------------------------------------------- |
|
|
51
72
|
| `intlayerPolyfill` | React Native के लिए Intlayer का समर्थन करने हेतु आवश्यक polyfills लागू करने वाला फ़ंक्शन। |
|
|
52
73
|
|
|
53
|
-
|
|
74
|
+
```tsx
|
|
75
|
+
import { intlayerPolyfill } from "react-native-intlayer";
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
> जब आप `IntlayerProvider` import करते हैं तो polyfill स्वचालित रूप से लागू हो जाता है। `intlayerPolyfill` को मैन्युअल रूप से केवल तब कॉल करें जब provider mount होने से पहले polyfills की आवश्यकता हो।
|
|
79
|
+
|
|
80
|
+
### Formatters
|
|
81
|
+
|
|
82
|
+
संख्या, दिनांक और अन्य Intl-आधारित formatting hooks `/format` subpath से उपलब्ध हैं:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { useNumber, useDate } from "react-native-intlayer/format";
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Markdown और HTML रेंडरिंग
|
|
54
89
|
|
|
55
90
|
```tsx
|
|
56
|
-
import "react-native-intlayer";
|
|
91
|
+
import { MarkdownProvider } from "react-native-intlayer/markdown";
|
|
92
|
+
import { HTMLProvider } from "react-native-intlayer/html";
|
|
57
93
|
```
|
|
58
94
|
|
|
59
95
|
### Metro कॉन्फ़िगरेशन
|
|
@@ -66,8 +102,6 @@ The `react-native-intlayer` पैकेज Metro कॉन्फ़िगरे
|
|
|
66
102
|
| `configMetroIntlayerSync` | Intlayer संसाधनों को तैयार किए बिना Metro कॉन्फ़िगरेशन को मर्ज करने वाला सिंक्रोनस फ़ंक्शन। |
|
|
67
103
|
| `exclusionList` | Metro की blockList के लिए RegExp पैटर्न बनाता है ताकि बंडल से कंटेंट फ़ाइलें बाहर की जा सकें। |
|
|
68
104
|
|
|
69
|
-
Import:
|
|
70
|
-
|
|
71
105
|
```tsx
|
|
72
|
-
import "react-native-intlayer/metro";
|
|
106
|
+
import { configMetroIntlayer } from "react-native-intlayer/metro";
|
|
73
107
|
```
|