@intlayer/docs 5.5.8

package/hi/packages/react-intlayer/t.md

@@ -0,0 +1,283 @@
+# दस्तावेज़: `t` फ़ंक्शन `react-intlayer` में
+
+`react-intlayer` पैकेज में `t` फ़ंक्शन आपके React एप्लिकेशन में इनलाइन अंतर्राष्ट्रीयकरण के लिए एक मौलिक उपकरण है। यह आपको अपने घटकों के भीतर सीधे अनुवाद परिभाषित करने की अनुमति देता है, जिससे वर्तमान लोकेल के आधार पर स्थानीयकृत सामग्री प्रदर्शित करना सरल हो जाता है।
+
+---
+
+## अवलोकन
+
+`t` फ़ंक्शन का उपयोग आपके घटकों में विभिन्न लोकेल्स के लिए अनुवाद प्रदान करने के लिए किया जाता है। प्रत्येक समर्थित लोकेल के लिए अनुवादों वाली एक वस्तु पास करके, `t` आपके React एप्लिकेशन में वर्तमान लोकेल संदर्भ के आधार पर उपयुक्त अनुवाद लौटाता है।
+
+---
+
+## मुख्य विशेषताएँ
+
+- **इनलाइन अनुवाद**: त्वरित, इनलाइन टेक्स्ट के लिए आदर्श जो अलग सामग्री घोषणा की आवश्यकता नहीं है।
+- **स्वचालित लोकेल चयन**: स्वचालित रूप से वर्तमान लोकेल के अनुरूप अनुवाद लौटाता है।
+- **टाइपस्क्रिप्ट समर्थन**: टाइप सेफ्टी और टाइपस्क्रिप्ट के साथ उपयोग किए जाने पर ऑटो-कम्प्लीशन प्रदान करता है।
+- **आसान एकीकरण**: React घटकों के भीतर सहजता से काम करता है।
+
+---
+
+## फ़ंक्शन हस्ताक्षर
+
+```typescript
+t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string
+```
+
+### पैरामीटर्स
+
+- `translations`: एक वस्तु जहाँ कुंजियाँ लोकेल कोड्स (जैसे, `en`, `fr`, `es`) हैं और मान संबंधित अनुवादित स्ट्रिंग्स हैं।
+
+### रिटर्न्स
+
+- वर्तमान लोकेल के लिए अनुवादित सामग्री का प्रतिनिधित्व करने वाली एक स्ट्रिंग।
+
+---
+
+## उपयोग के उदाहरण
+
+### एक घटक में `t` का बुनियादी उपयोग
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { t } from "react-intlayer";
+
+export const ComponentExample: FC = () => {
+  return (
+    <div>
+      <p>
+        {t({
+          en: "This is an example of a component",
+          fr: "Ceci est un exemple de composant",
+          es: "Este es un ejemplo de componente",
+          hi: "यह एक घटक का उदाहरण है",
+        })}
+      </p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
+import { t } from "react-intlayer";
+
+const ComponentExample = () => {
+  return (
+    <div>
+      <p>
+        {t({
+          en: "This is an example of a component",
+          fr: "Ceci est un exemple de composant",
+          es: "Este es un ejemplo de componente",
+          hi: "यह एक घटक का उदाहरण है",
+        })}
+      </p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
+const { t } = require("react-intlayer");
+
+const ComponentExample = () => {
+  return (
+    <div>
+      <p>
+        {t({
+          en: "This is an example of a component",
+          fr: "Ceci est un exemple de composant",
+          es: "Este es un ejemplo de componente",
+          hi: "यह एक घटक का उदाहरण है",
+        })}
+      </p>
+    </div>
+  );
+};
+```
+
+### गुणों में इनलाइन अनुवाद
+
+`t` फ़ंक्शन JSX गुणों में इनलाइन अनुवाद के लिए विशेष रूप से उपयोगी है। `alt`, `title`, `href`, या `aria-label` जैसे गुणों को स्थानीयकृत करते समय, आप सीधे गुण के भीतर `t` का उपयोग कर सकते हैं।
+
+```jsx
+<button
+  aria-label={t({
+    en: "Submit",
+    fr: "Soumettre",
+    es: "Enviar",
+    hi: "जमा करें",
+  })}
+>
+  {t({
+    en: "Submit",
+    fr: "Soumettre",
+    es: "Enviar",
+    hi: "जमा करें",
+  })}
+  <img
+    src="/path/to/image"
+    alt={t({
+      en: "A beautiful scenery",
+      fr: "Un beau paysage",
+      es: "Un hermoso paisaje",
+      hi: "एक सुंदर दृश्य",
+    })}
+  />
+</button>
+```
+
+---
+
+## उन्नत विषय
+
+### टाइपस्क्रिप्ट एकीकरण
+
+जब टाइपस्क्रिप्ट के साथ उपयोग किया जाता है, तो `t` फ़ंक्शन टाइप-सुरक्षित होता है, यह सुनिश्चित करता है कि सभी आवश्यक लोकेल्स प्रदान किए गए हैं।
+
+```typescript codeFormat="typescript"
+import { t, type IConfigLocales } from "react-intlayer";
+
+const translations: IConfigLocales<string> = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+  hi: "स्वागत है",
+};
+
+const greeting = t(translations);
+```
+
+```javascript codeFormat="esm"
+import { t, type IConfigLocales } from "react-intlayer";
+
+/** @type {import('react-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+  hi: "स्वागत है",
+};
+
+const greeting = t(translations);
+```
+
+```javascript codeFormat="commonjs"
+const { t, type IConfigLocales } = require("react-intlayer");
+
+/** @type {import('react-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Welcome",
+  fr: "Bienvenue",
+  es: "Bienvenido",
+  hi: "स्वागत है",
+};
+
+const greeting = t(translations);
+```
+
+### लोकेल डिटेक्शन और संदर्भ
+
+`react-intlayer` में, वर्तमान लोकेल `IntlayerProvider` के माध्यम से प्रबंधित किया जाता है। सुनिश्चित करें कि यह प्रदाता आपके घटकों को रैप करता है और `locale` प्रॉप सही तरीके से पास किया गया है।
+
+#### उदाहरण:
+
+```tsx fileName="src/app.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import type { Locales } from "intlayer";
+import { IntlayerProvider } from "react-intlayer";
+
+const App: FC<{ locale: Locales }> = ({ locale }) => (
+  <IntlayerProvider locale={locale}>{/* आपके घटक यहाँ */}</IntlayerProvider>
+);
+```
+
+```jsx fileName="src/app.mjx" codeFormat="esm"
+import { IntlayerProvider } from "react-intlayer";
+
+const App = ({ locale }) => (
+  <IntlayerProvider locale={locale}>{/* आपके घटक यहाँ */}</IntlayerProvider>
+);
+```
+
+```jsx fileName="src/app.csx" codeFormat="commonjs"
+const { IntlayerProvider } = require("react-intlayer");
+
+const App = ({ locale }) => (
+  <IntlayerProvider locale={locale}>{/* आपके घटक यहाँ */}</IntlayerProvider>
+);
+```
+
+---
+
+## सामान्य त्रुटियाँ और समस्या निवारण
+
+### `t` अपरिभाषित या गलत अनुवाद लौटाता है
+
+- **कारण**: वर्तमान लोकेल सही तरीके से सेट नहीं है, या वर्तमान लोकेल के लिए अनुवाद गायब है।
+- **समाधान**:
+  - सुनिश्चित करें कि `IntlayerProvider` उपयुक्त `locale` के साथ सही तरीके से सेटअप किया गया है।
+  - सुनिश्चित करें कि आपकी अनुवाद वस्तु में सभी आवश्यक लोकेल्स शामिल हैं।
+
+### टाइपस्क्रिप्ट में गायब अनुवाद
+
+- **कारण**: अनुवाद वस्तु आवश्यक लोकेल्स को संतुष्ट नहीं करती है, जिससे टाइपस्क्रिप्ट त्रुटियाँ होती हैं।
+- **समाधान**: अपने अनुवादों की पूर्णता को लागू करने के लिए `IConfigLocales` प्रकार का उपयोग करें।
+
+```typescript codeFormat="typescript"
+const translations: IConfigLocales<string> = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // 'es' गायब होने से टाइपस्क्रिप्ट त्रुटि होगी
+  hi: "पाठ",
+};
+
+const text = t(translations);
+```
+
+```javascript codeFormat="esm"
+const translations = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // 'es' गायब होने से टाइपस्क्रिप्ट त्रुटि होगी
+  hi: "पाठ",
+};
+
+const text = t(translations);
+```
+
+```javascript codeFormat="commonjs"
+const { t, type IConfigLocales } = require("react-intlayer");
+
+/** @type {import('react-intlayer').IConfigLocales<string>} */
+const translations = {
+  en: "Text",
+  fr: "Texte",
+  // es: 'Texto', // 'es' गायब होने से टाइपस्क्रिप्ट त्रुटि होगी
+  hi: "पाठ",
+};
+
+const text = t(translations);
+```
+
+---
+
+## प्रभावी उपयोग के लिए सुझाव
+
+1. **सरल इनलाइन अनुवादों के लिए `t` का उपयोग करें**: अपने घटकों के भीतर सीधे छोटे टेक्स्ट का अनुवाद करने के लिए आदर्श।
+2. **संरचित सामग्री के लिए `useIntlayer` को प्राथमिकता दें**: अधिक जटिल अनुवादों और सामग्री पुन: उपयोग के लिए, घोषणा फ़ाइलों में सामग्री परिभाषित करें और `useIntlayer` का उपयोग करें।
+3. **संगत लोकेल प्रावधान**: सुनिश्चित करें कि आपके एप्लिकेशन में `IntlayerProvider` के माध्यम से आपका लोकेल लगातार प्रदान किया गया है।
+4. **टाइपस्क्रिप्ट का लाभ उठाएँ**: गायब अनुवादों को पकड़ने और टाइप सेफ्टी सुनिश्चित करने के लिए टाइपस्क्रिप्ट प्रकारों का उपयोग करें।
+
+---
+
+## निष्कर्ष
+
+`react-intlayer` में `t` फ़ंक्शन आपके React एप्लिकेशन में इनलाइन अनुवाद प्रबंधन के लिए एक शक्तिशाली और सुविधाजनक उपकरण है। इसे प्रभावी ढंग से एकीकृत करके, आप अपने ऐप की अंतर्राष्ट्रीयकरण क्षमताओं को बढ़ाते हैं, जिससे दुनिया भर के उपयोगकर्ताओं के लिए बेहतर अनुभव प्रदान होता है।
+
+अधिक विस्तृत उपयोग और उन्नत सुविधाओं के लिए, [react-intlayer दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/hi/intlayer_visual_editor.md) देखें।
+
+---
+
+**नोट**: सुनिश्चित करें कि आपका `IntlayerProvider` सही तरीके से सेटअप किया गया है ताकि वर्तमान लोकेल आपके घटकों तक सही तरीके से पहुँचाया जा सके। यह सुनिश्चित करने के लिए महत्वपूर्ण है कि `t` फ़ंक्शन सही अनुवाद लौटाए।

package/hi/packages/react-intlayer/useDictionary.md

@@ -0,0 +1,268 @@
+# React एकीकरण: `useDictionary` हुक दस्तावेज़ीकरण
+
+यह अनुभाग React अनुप्रयोगों में `useDictionary` हुक का उपयोग करने पर विस्तृत मार्गदर्शन प्रदान करता है, जो दृश्य संपादक के बिना स्थानीयकृत सामग्री को कुशलतापूर्वक संभालने में सक्षम बनाता है।
+
+## React में `useDictionary` आयात करना
+
+React अनुप्रयोगों में `useDictionary` हुक को संदर्भ के आधार पर आयात करके एकीकृत किया जा सकता है:
+
+- **क्लाइंट घटक:**
+
+  ```typescript codeFormat="typescript"
+  import { useDictionary } from "react-intlayer"; // क्लाइंट-साइड React घटकों में उपयोग किया जाता है
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useDictionary } from "react-intlayer"; // क्लाइंट-साइड React घटकों में उपयोग किया जाता है
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useDictionary } = require("react-intlayer"); // क्लाइंट-साइड React घटकों में उपयोग किया जाता है
+  ```
+
+- **सर्वर घटक:**
+
+  ```typescript codeFormat="typescript"
+  import { useDictionary } from "react-intlayer/server"; // सर्वर-साइड React घटकों में उपयोग किया जाता है
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useDictionary } from "react-intlayer/server"; // सर्वर-साइड React घटकों में उपयोग किया जाता है
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useDictionary } = require("react-intlayer/server"); // सर्वर-साइड React घटकों में उपयोग किया जाता है
+  ```
+
+## पैरामीटर
+
+हुक दो पैरामीटर स्वीकार करता है:
+
+1. **`dictionary`**: एक घोषित शब्दकोश वस्तु जिसमें विशिष्ट कुंजियों के लिए स्थानीयकृत सामग्री होती है।
+2. **`locale`** (वैकल्पिक): वांछित लोकेल। यदि निर्दिष्ट नहीं किया गया है, तो यह वर्तमान संदर्भ के लोकेल पर डिफ़ॉल्ट होता है।
+
+## शब्दकोश
+
+सभी शब्दकोश वस्तुओं को संरचित सामग्री फ़ाइलों में घोषित किया जाना चाहिए ताकि प्रकार सुरक्षा सुनिश्चित हो सके और रनटाइम त्रुटियों को रोका जा सके। सेटअप निर्देश [यहाँ](https://github.com/aymericzip/intlayer/blob/main/docs/hi/dictionary/get_started.md) पाए जा सकते हैं। यहाँ सामग्री घोषणा का एक उदाहरण है:
+
+```typescript fileName="./component.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+      hi: "क्लाइंट घटक उदाहरण",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un ejemplo de componente cliente",
+      hi: "यह क्लाइंट घटक उदाहरण की सामग्री है",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+```javascript fileName="./component.content.mjs" contentDeclarationFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+      hi: "क्लाइंट घटक उदाहरण",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un ejemplo de componente cliente",
+      hi: "यह क्लाइंट घटक उदाहरण की सामग्री है",
+    }),
+  },
+};
+
+export default componentContent;
+```
+
+```javascript fileName="./component.content.cjs" contentDeclarationFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Client Component Example",
+      fr: "Exemple de composant client",
+      es: "Ejemplo de componente cliente",
+      hi: "क्लाइंट घटक उदाहरण",
+    }),
+    content: t({
+      en: "This is the content of a client component example",
+      fr: "Ceci est le contenu d'un exemple de composant client",
+      es: "Este es el contenido de un ejemplo de componente cliente",
+      hi: "यह क्लाइंट घटक उदाहरण की सामग्री है",
+    }),
+  },
+};
+
+module.exports = componentContent;
+```
+
+```json fileName="./component.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Client Component Example",
+        "fr": "Exemple de composant client",
+        "es": "Ejemplo de componente cliente",
+        "hi": "क्लाइंट घटक उदाहरण"
+      }
+    },
+    "content": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "This is the content of a client component example",
+        "fr": "Ceci est le contenu d'un exemple de composant client",
+        "es": "Este es el contenido de un ejemplo de componente cliente",
+        "hi": "यह क्लाइंट घटक उदाहरण की सामग्री है"
+      }
+    }
+  }
+}
+```
+
+## React में उपयोग का उदाहरण
+
+नीचे React घटक में `useDictionary` हुक का उपयोग करने का एक उदाहरण दिया गया है:
+
+```tsx fileName="./ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+const ComponentExample: FC = () => {
+  const { title, content } = useDictionary(componentContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="./ComponentExample.mjx" codeFormat="esm"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+const ComponentExample = () => {
+  const { title, content } = useDictionary(componentContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="./ComponentExample.csx" codeFormat="commonjs"
+const { useDictionary } = require("react-intlayer");
+const componentContent = require("./component.content");
+
+const ComponentExample = () => {
+  const { title, content } = useDictionary(componentContent);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
+
+## सर्वर एकीकरण
+
+यदि आप `IntlayerProvider` के बाहर `useDictionary` हुक का उपयोग कर रहे हैं, तो घटक को रेंडर करते समय लोकेल को स्पष्ट रूप से पैरामीटर के रूप में प्रदान करना आवश्यक है:
+
+```tsx fileName="./ServerComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useDictionary } from "react-intlayer/server";
+import clientComponentExampleContent from "./component.content";
+
+const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {
+  const { content } = useDictionary(clientComponentExampleContent, locale);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="./ServerComponentExample.mjx" codeFormat="esm"
+import { useDictionary } from "react-intlayer/server";
+import componentContent from "./component.content";
+
+const ServerComponentExample = ({ locale }) => {
+  const { content } = useDictionary(componentContent, locale);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="./ServerComponentExample.csx" codeFormat="commonjs"
+const { useDictionary } = require("react-intlayer/server");
+const componentContent = require("./component.content");
+
+const ServerComponentExample = ({ locale }) => {
+  const { content } = useDictionary(componentContent, locale);
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
+
+## विशेषताओं पर नोट्स
+
+दृश्य संपादकों का उपयोग करने वाले एकीकरणों के विपरीत, `buttonTitle.value` जैसे विशेषताएँ यहाँ लागू नहीं होती हैं। इसके बजाय, अपनी सामग्री में घोषित स्थानीयकृत स्ट्रिंग्स को सीधे एक्सेस करें।
+
+```jsx
+<button title={content.title}>{content.content}</button>
+```
+
+## अतिरिक्त सुझाव
+
+- **प्रकार सुरक्षा**: अपने शब्दकोशों को परिभाषित करने के लिए हमेशा `Dictionary` का उपयोग करें ताकि प्रकार सुरक्षा सुनिश्चित हो सके।
+- **स्थानीयकरण अपडेट**: सामग्री को अपडेट करते समय, सभी लोकेल को सुसंगत रखें ताकि अनुवाद छूटने से बचा जा सके।
+
+यह दस्तावेज़ीकरण `useDictionary` हुक के एकीकरण पर केंद्रित है, जो दृश्य संपादक कार्यक्षमताओं पर निर्भर किए बिना स्थानीयकृत सामग्री को प्रबंधित करने के लिए एक सुव्यवस्थित दृष्टिकोण प्रदान करता है।