@intlayer/docs 5.7.5 → 5.7.6

package/docs/hi/packages/react-intlayer/useI18n.md

@@ -0,0 +1,259 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: useI18n हुक दस्तावेज़ | react-intlayer
+description: react-intlayer पैकेज में useI18n हुक का उपयोग कैसे करें, जानें
+keywords:
+  - useI18n
+  - i18n
+  - अनुवाद
+  - शब्दकोश
+  - Intlayer
+  - अंतरराष्ट्रीयकरण
+  - दस्तावेज़ीकरण
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - react-intlayer
+  - useI18n
+---
+
+# React एकीकरण: `useI18n` हुक दस्तावेज़
+
+यह अनुभाग React अनुप्रयोगों के भीतर `useI18n` हुक का उपयोग कैसे करें, इस पर विस्तृत मार्गदर्शन प्रदान करता है, जिससे कुशल सामग्री स्थानीयकरण सक्षम होता है।
+
+## React में `useI18n` आयात करना
+
+`useI18n` हुक को संदर्भ के अनुसार React अनुप्रयोगों में निम्नलिखित तरीके से आयात और एकीकृत किया जा सकता है:
+
+- **क्लाइंट कंपोनेंट्स:**
+
+  ```typescript codeFormat="typescript"
+  import { useI18n } from "react-intlayer"; // क्लाइंट-साइड React कंपोनेंट्स में उपयोग करें
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer"; // क्लाइंट-साइड React कंपोनेंट्स में उपयोग करें
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer"); // क्लाइंट-साइड React कंपोनेंट्स में उपयोग करें
+  ```
+
+- **सर्वर कंपोनेंट्स:**
+
+  ```typescript codeFormat="commonjs"
+  import { useI18n } from "react-intlayer/server"; // सर्वर-साइड React कंपोनेंट्स में उपयोग करें
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer/server"; // सर्वर-साइड React कंपोनेंट्स में उपयोग करें
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer/server"); // सर्वर-साइड React कंपोनेंट्स में उपयोग करें
+  ```
+
+## पैरामीटर
+
+यह हुक दो पैरामीटर स्वीकार करता है:
+
+1. **`namespace`**: अनुवाद कुंजियों के स्कोप के लिए एक शब्दकोश नामस्थान।
+2. **`locale`** (वैकल्पिक): इच्छित लोकल। यदि निर्दिष्ट नहीं किया गया है, तो संदर्भ का लोकल डिफ़ॉल्ट के रूप में उपयोग किया जाएगा।
+
+## शब्दकोश
+
+सभी शब्दकोश कुंजियाँ सामग्री घोषणा फ़ाइलों के भीतर घोषित की जानी चाहिए ताकि प्रकार सुरक्षा बढ़े और त्रुटियों से बचा जा सके। [कॉन्फ़िगरेशन निर्देश यहाँ पाए जा सकते हैं](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md)।
+
+## React में उपयोग के उदाहरण
+
+React कंपोनेंट्स के भीतर `useI18n` हुक का उपयोग करने के उदाहरण:
+
+```tsx fileName="src/App.tsx" codeFormat="typescript"
+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>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.jsx" codeFormat="esm"
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { IntlayerServerProvider, useI18n } from "react-intlayer/server";
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.cjs" codeFormat="commonjs"
+const { IntlayerProvider } = require("react-intlayer");
+const { IntlayerServerProvider, useI18n } = require("react-intlayer/server");
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+         <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+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>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer";
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* शीर्षक दिखाएं */}
+      <p>{t("description")}</p> {/* विवरण दिखाएं */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* शीर्षक दिखाएं */}
+      <p>{t("description")}</p> {/* विवरण दिखाएं */}
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* शीर्षक दिखाएं */}
+      <p>{t("description")}</p> {/* विवरण दिखाएं */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* शीर्षक दिखाएं */}
+      <p>{t("description")}</p> {/* विवरण दिखाएं */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer/server");
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+```
+
+## एट्रिब्यूट हैंडलिंग
+
+जब एट्रिब्यूट्स का स्थानीयकरण किया जाता है, तो अनुवाद मानों तक उचित रूप से पहुँचें:
+
+```jsx
+<button title={t("buttonTitle.value")}>{t("buttonText")}</button>;
+
+{
+  /* पहुँच योग्यता एट्रिब्यूट्स (जैसे, aria-label) के लिए, .value का उपयोग करें क्योंकि शुद्ध स्ट्रिंग्स आवश्यक हैं */
+}
+<button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>;
+```
+
+## अतिरिक्त संसाधन
+
+- **Intlayer विज़ुअल एडिटर**: एक अधिक सहज सामग्री प्रबंधन अनुभव के लिए, विज़ुअल एडिटर दस्तावेज़ीकरण [यहाँ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) देखें।
+
+यह अनुभाग विशेष रूप से React अनुप्रयोगों में `useI18n` हुक के एकीकरण को कवर करता है, जो स्थानीयकरण प्रक्रिया को सरल बनाता है और विभिन्न स्थानीयताओं में सामग्री की संगति सुनिश्चित करता है।
+
+## प्रलेखन इतिहास
+
+- 6.0.0 - 2025-06-29: `useI18n` हुक प्रलेखन की प्रारंभिक लेखन

package/docs/it/packages/react-intlayer/useI18n.md

@@ -0,0 +1,250 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: Documentazione Hook useI18n | react-intlayer
+description: Scopri come utilizzare l'hook useI18n nel pacchetto react-intlayer
+keywords:
+  - useI18n
+  - i18n
+  - traduzione
+  - dizionario
+  - Intlayer
+  - internazionalizzazione
+  - documentazione
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - react-intlayer
+  - useI18n
+---
+
+# Integrazione React: Documentazione Hook `useI18n`
+
+Questa sezione fornisce una guida dettagliata su come utilizzare l'hook `useI18n` all'interno delle applicazioni React, permettendo una localizzazione efficiente dei contenuti.
+
+## Importare `useI18n` in React
+
+L'hook `useI18n` può essere importato e integrato nelle applicazioni React a seconda del contesto come segue:
+
+- **Componenti Client:**
+
+  ```typescript codeFormat="typescript"
+  import { useI18n } from "react-intlayer"; // Usare nei componenti React lato client
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer"; // Usare nei componenti React lato client
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer"); // Usare nei componenti React lato client
+  ```
+
+- **Componenti Server:**
+
+  ```typescript codeFormat="commonjs"
+  import { useI18n } from "react-intlayer/server"; // Usare nei componenti React lato server
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer/server"; // Usare nei componenti React lato server
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer/server"); // Usare nei componenti React lato server
+  ```
+
+## Parametri
+
+Questo hook accetta due parametri:
+
+1. **`namespace`**: Un namespace del dizionario per delimitare le chiavi di traduzione.
+2. **`locale`** (opzionale): La locale desiderata. Se non specificata, verrà usata come default la locale del contesto.
+
+## Dizionario
+
+Tutte le chiavi del dizionario devono essere dichiarate all'interno dei file di dichiarazione del contenuto per migliorare la sicurezza dei tipi e prevenire errori. [Le istruzioni di configurazione si trovano qui](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/get_started.md).
+
+## Esempi di utilizzo in React
+
+Esempi di utilizzo dell'hook `useI18n` all'interno di componenti React:
+
+```tsx fileName="src/App.tsx" codeFormat="typescript"
+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>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.jsx" codeFormat="esm"
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { IntlayerServerProvider, useI18n } from "react-intlayer/server";
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduzione")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.cjs" codeFormat="commonjs"
+const { IntlayerProvider } = require("react-intlayer");
+const { IntlayerServerProvider, useI18n } = require("react-intlayer/server");
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduzione")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useI18n } from "react-intlayer";
+
+const ComponentExample: FC = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostra il titolo */}
+      <p>{t("description")}</p> {/* Mostra la descrizione */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer";
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostra il titolo */}
+      <p>{t("description")}</p> {/* Mostra la descrizione */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostra il titolo */}
+      <p>{t("description")}</p> {/* Mostra la descrizione */}
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostra il titolo */}
+      <p>{t("description")}</p> {/* Mostra la descrizione */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react.intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* Mostra il titolo */}
+      <p>{t("description")}</p> {/* Mostra la descrizione */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react.intlayer/server");
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+```
+
+## Gestione degli Attributi
+
+Quando si localizzano gli attributi, accedere correttamente ai valori di traduzione:
+
+```jsx
+<!-- Per gli attributi di accessibilità (es. aria-label), usare .value poiché sono richieste stringhe pure -->
+<button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>
+```
+
+## Risorse Aggiuntive
+
+- **Intlayer Visual Editor**: Per un'esperienza di gestione dei contenuti più intuitiva, fare riferimento alla documentazione dell'editor visuale [qui](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md).
+
+Questa sezione copre specificamente l'integrazione del hook `useI18n` nelle applicazioni React, semplificando il processo di localizzazione e garantendo la coerenza dei contenuti tra le diverse localizzazioni.
+
+## Cronologia della Documentazione
+
+- 6.0.0 - 2025-06-29: Scrittura iniziale della documentazione dell'hook `useI18n`

package/docs/ja/dictionary/enumeration.md

@@ -15,7 +15,6 @@ slugs:
   - doc
   - concept
   - content
-  - dictionary
   - enumeration
 ---