@intlayer/docs 5.7.6-canary.0 → 5.7.7

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

@@ -1,252 +0,0 @@
----
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: useIntlayerAsync हुक दस्तावेज़ | react-intlayer
-description: react-intlayer पैकेज के लिए useIntlayerAsync हुक का उपयोग कैसे करें देखें
-keywords:
-  - useIntlayerAsync
-  - dictionary
-  - key
-  - Intlayer
-  - Internationalization
-  - Documentation
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - react-intlayer
-  - useIntlayerAsync
----
-
-# React एकीकरण: `useIntlayerAsync` हुक दस्तावेज़
-
-`useIntlayerAsync` हुक `useIntlayer` की कार्यक्षमता को बढ़ाता है, जो केवल पूर्व-रेंडर किए गए शब्दकोश लौटाने तक सीमित नहीं है, बल्कि अपडेट्स को असिंक्रोनस तरीके से प्राप्त भी करता है, जिससे यह उन एप्लिकेशन के लिए आदर्श होता है जो प्रारंभिक रेंडर के बाद अपने स्थानीयकृत कंटेंट को बार-बार अपडेट करते हैं।
-
-## अवलोकन
-
-- **असिंक्रोनस शब्दकोश लोडिंग:**  
-  प्रारंभिक माउंट पर, `useIntlayerAsync` पहले किसी भी पूर्व-प्राप्त या स्थैतिक रूप से बंडल किए गए स्थानीय शब्दकोश को लौटाता है (जैसे कि `useIntlayer` करता है) और फिर असिंक्रोनस तरीके से किसी भी नए उपलब्ध रिमोट शब्दकोश को प्राप्त करके मर्ज करता है।
-- **प्रगति स्थिति प्रबंधन:**  
-  यह हुक एक `isLoading` स्थिति भी प्रदान करता है, जो दर्शाता है कि कब रिमोट शब्दकोश प्राप्त किया जा रहा है। इससे डेवलपर्स को लोडिंग संकेतक या स्केलेटन स्टेट दिखाने की सुविधा मिलती है, जिससे उपयोगकर्ता अनुभव अधिक सहज होता है।
-
-## पर्यावरण सेटअप
-
-Intlayer एक हेडलेस कंटेंट सोर्स मैनेजमेंट (CSM) सिस्टम प्रदान करता है जो गैर-डेवलपर्स को एप्लिकेशन कंटेंट को सहजता से प्रबंधित और अपडेट करने में सक्षम बनाता है। Intlayer के सहज डैशबोर्ड का उपयोग करके, आपकी टीम स्थानीयकृत टेक्स्ट, छवियों, और अन्य संसाधनों को सीधे कोड में बदलाव किए बिना संपादित कर सकती है। यह कंटेंट प्रबंधन प्रक्रिया को सरल बनाता है, सहयोग को बढ़ावा देता है, और सुनिश्चित करता है कि अपडेट जल्दी और आसानी से किए जा सकें।
-
-Intlayer के साथ शुरू करने के लिए:
-
-1. **पंजीकरण करें और एक एक्सेस टोकन प्राप्त करें** [https://intlayer.org/dashboard](https://intlayer.org/dashboard) पर।
-2. **अपने कॉन्फ़िगरेशन फ़ाइल में क्रेडेंशियल्स जोड़ें:**  
-   अपने React प्रोजेक्ट में, अपने क्रेडेंशियल्स के साथ Intlayer क्लाइंट को कॉन्फ़िगर करें:
-
-   ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-   import type { IntlayerConfig } from "intlayer";
-
-   export default {
-     // ...
-     editor: {
-       clientId: process.env.INTLAYER_CLIENT_ID,
-       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-     },
-   } satisfies IntlayerConfig;
-   ```
-
-   ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-   import { type IntlayerConfig } from "intlayer";
-
-   /** @type {import('intlayer').IntlayerConfig} */
-   const config = {
-     // ...
-     editor: {
-       clientId: process.env.INTLAYER_CLIENT_ID,
-       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-     },
-   };
-
-   export default config;
-   ```
-
-   ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-   /** @type {import('intlayer').IntlayerConfig} */
-   const config = {
-     // ...
-     editor: {
-       clientId: process.env.INTLAYER_CLIENT_ID,
-       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-     },
-   };
-
-   module.exports = config;
-   ```
-
-3. **Intlayer में एक नया लोकल डिक्शनरी पुश करें:**
-
-   ```bash
-   npx intlayer dictionary push -d my-first-dictionary-key
-   ```
-
-   यह कमांड आपके प्रारंभिक कंटेंट डिक्शनरीज़ को अपलोड करता है, जिससे वे Intlayer प्लेटफ़ॉर्म के माध्यम से असिंक्रोनस रूप से फ़ेचिंग और संपादन के लिए उपलब्ध हो जाते हैं।
-
-## React में `useIntlayerAsync` को इम्पोर्ट करना
-
-अपने React कॉम्पोनेंट्स में, `useIntlayerAsync` को इम्पोर्ट करें:
-
-```ts codeFormat="typescript"
-import { useIntlayerAsync } from "react-intlayer";
-```
-
-```js codeFormat="esm"
-import { useIntlayerAsync } from "react-intlayer";
-```
-
-```js codeFormat="commonjs"
-const { useIntlayerAsync } = require("react-intlayer");
-```
-
-## पैरामीटर
-
-1. **`key`**:  
-   **प्रकार**: `DictionaryKeys`  
-   वह डिक्शनरी कुंजी जिसका उपयोग स्थानीयकृत कंटेंट ब्लॉक की पहचान के लिए किया जाता है। यह कुंजी आपके कंटेंट घोषणा फ़ाइलों में परिभाषित होनी चाहिए।
-
-2. **`locale`** (वैकल्पिक):  
-   **प्रकार**: `Locales`  
-   वह विशिष्ट लोकल जिसे आप लक्षित करना चाहते हैं। यदि छोड़ा गया है, तो हुक वर्तमान Intlayer संदर्भ से लोकल का उपयोग करता है।
-
-3. **`isRenderEditor`** (वैकल्पिक, डिफ़ॉल्ट `true`):  
-   **प्रकार**: `boolean`  
-   यह निर्धारित करता है कि कंटेंट Intlayer एडिटर ओवरले के साथ रेंडरिंग के लिए तैयार होना चाहिए या नहीं। यदि इसे `false` सेट किया जाता है, तो लौटाई गई डिक्शनरी डेटा में एडिटर-विशिष्ट फीचर्स शामिल नहीं होंगे।
-
-## रिटर्न वैल्यू
-
-हुक एक डिक्शनरी ऑब्जेक्ट लौटाता है जिसमें स्थानीयकृत सामग्री होती है, जो `key` और `locale` द्वारा कुंजीबद्ध होती है। इसमें एक `isLoading` बूलियन भी शामिल है जो यह संकेत देता है कि क्या कोई रिमोट डिक्शनरी वर्तमान में लोड की जा रही है।
-
-## एक React कॉम्पोनेंट में उदाहरण उपयोग
-
-```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
-import { useEffect, type FC } from "react";
-import { useIntlayerAsync } from "react-intlayer";
-
-export const ComponentExample: FC = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("सामग्री लोड हो रही है...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>लोड हो रहा है…</h1>
-          <p>कृपया प्रतीक्षा करें जब तक सामग्री अपडेट हो रही है।</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
-import { useEffect } from "react";
-import { useIntlayerAsync } from "react-intlayer";
-
-const ComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("सामग्री लोड हो रही है...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>लोड हो रहा है…</h1>
-          <p>कृपया प्रतीक्षा करें जब तक सामग्री अपडेट हो रही है।</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
-const { useEffect } = require("react");
-const { useIntlayerAsync } = require("react-intlayer");
-
-const ComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("सामग्री लोड हो रही है...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      {isLoading ? (
-        <div>
-          <h1>लोड हो रहा है…</h1>
-          <p>कृपया प्रतीक्षा करें जब तक सामग्री अपडेट हो रही है।</p>
-        </div>
-      ) : (
-        <div>
-          <h1>{title.value}</h1>
-          <p>{description.value}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-**मुख्य बिंदु:**
-
-- प्रारंभिक रेंडर पर, `title` और `description` पहले से प्राप्त या स्थैतिक रूप से एम्बेड किए गए लोकल डिक्शनरी से आते हैं।
-- जब `isLoading` `true` होता है, तब एक पृष्ठभूमि अनुरोध एक अपडेटेड डिक्शनरी प्राप्त करता है।
-- एक बार जब फ़ेच पूरा हो जाता है, तो `title` और `description` नवीनतम सामग्री के साथ अपडेट हो जाते हैं, और `isLoading` फिर से `false` हो जाता है।
-
-## एट्रिब्यूट लोकलाइजेशन को संभालना
-
-आप विभिन्न HTML गुणों (जैसे, `alt`, `title`, `aria-label`) के लिए लोकलाइज्ड एट्रिब्यूट मान भी प्राप्त कर सकते हैं:
-
-```jsx
-<img src={title.image.src.value} alt={title.image.alt.value} />
-```
-
-## डिक्शनरी फ़ाइलें
-
-सभी सामग्री कुंजियाँ आपके कंटेंट घोषणा फ़ाइलों में परिभाषित होनी चाहिए ताकि टाइप सुरक्षा बनी रहे और रनटाइम त्रुटियों से बचा जा सके। ये फ़ाइलें टाइपस्क्रिप्ट सत्यापन सक्षम करती हैं, जिससे आप हमेशा मौजूदा कुंजियों और लोकल्स का संदर्भ लेते हैं।
-
-सामग्री घोषणा फ़ाइलें सेट अप करने के निर्देश [यहाँ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/dictionary/get_started.md) उपलब्ध हैं।
-
-## आगे की जानकारी
-
-- **Intlayer विज़ुअल एडिटर:**  
-  UI से सीधे सामग्री प्रबंधन और संपादन के लिए Intlayer विज़ुअल एडिटर के साथ एकीकरण करें। अधिक जानकारी [यहाँ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md)।
-
----
-
-**सारांश में**, `useIntlayerAsync` एक शक्तिशाली React हुक है जिसे उपयोगकर्ता अनुभव को बेहतर बनाने और सामग्री की ताजगी बनाए रखने के लिए डिज़ाइन किया गया है, जो प्री-रेंडर की गई या प्री-फेच की गई शब्दकोशों को असिंक्रोनस शब्दकोश अपडेट्स के साथ मर्ज करता है। `isLoading` और TypeScript-आधारित सामग्री घोषणाओं का उपयोग करके, आप अपने React एप्लिकेशन में गतिशील, स्थानीयकृत सामग्री को सहजता से एकीकृत कर सकते हैं।
-
-## दस्तावेज़ इतिहास
-
-- 5.5.10 - 2025-06-29: प्रारंभिक इतिहास

package/docs/it/packages/next-intlayer/useIntlayerAsync.md

@@ -1,237 +0,0 @@
----
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: Documentazione Hook useIntlayerAsync | next-intlayer
-description: Scopri come utilizzare l'hook useIntlayerAsync per il pacchetto next-intlayer
-keywords:
-  - useIntlayerAsync
-  - dizionario
-  - chiave
-  - Intlayer
-  - Internazionalizzazione
-  - Documentazione
-  - Next.js
-  - JavaScript
-  - React
-slugs:
-  - doc
-  - packages
-  - next-intlayer
-  - useIntlayerAsync
----
-
-# Integrazione Next.js: Documentazione Hook `useIntlayerAsync`
-
-L'hook `useIntlayerAsync` estende la funzionalità di `useIntlayer` restituendo non solo i dizionari pre-renderizzati, ma anche recuperando aggiornamenti in modo asincrono, rendendolo ideale per applicazioni che aggiornano frequentemente i loro contenuti localizzati dopo il rendering iniziale.
-
-## Panoramica
-
-- **Caricamento asincrono del dizionario:**  
-  Sul lato client, `useIntlayerAsync` restituisce prima il dizionario locale pre-renderizzato (proprio come `useIntlayer`) e poi recupera e unisce in modo asincrono eventuali nuovi dizionari remoti disponibili.
-- **Gestione dello stato di avanzamento:**  
-  L'hook fornisce anche uno stato `isLoading`, che indica quando un dizionario remoto è in fase di recupero. Questo permette agli sviluppatori di mostrare indicatori di caricamento o stati scheletro per un'esperienza utente più fluida.
-
-## Configurazione dell'ambiente
-
-Intlayer fornisce un sistema di Content Source Management (CSM) headless che consente anche ai non sviluppatori di gestire e aggiornare i contenuti dell'applicazione in modo fluido. Utilizzando la dashboard intuitiva di Intlayer, il tuo team può modificare testi localizzati, immagini e altre risorse senza dover intervenire direttamente sul codice. Questo semplifica il processo di gestione dei contenuti, favorisce la collaborazione e garantisce che gli aggiornamenti possano essere effettuati rapidamente e facilmente.
-
-Per iniziare con Intlayer, è necessario prima registrarsi e ottenere un token di accesso nella [dashboard](https://intlayer.org/dashboard). Una volta ottenute le credenziali, aggiungile al file di configurazione come mostrato di seguito:
-
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import type { IntlayerConfig } from "intlayer";
-
-export default {
-  // ...
-  editor: {
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-  },
-} satisfies IntlayerConfig;
-```
-
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { type IntlayerConfig } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ...
-  editor: {
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ...
-  editor: {
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-  },
-};
-
-module.exports = config;
-```
-
-Dopo aver configurato le tue credenziali, puoi inviare un nuovo dizionario di localizzazione a Intlayer eseguendo:
-
-```bash
-npx intlayer dictionary push -d my-first-dictionary-key
-```
-
-Questo comando carica i tuoi dizionari di contenuti iniziali, rendendoli disponibili per il recupero asincrono e la modifica tramite la piattaforma Intlayer.
-
-## Importazione di `useIntlayerAsync` in Next.js
-
-Poiché `useIntlayerAsync` è destinato ai componenti **client-side**, lo importerai dallo stesso punto di ingresso client di `useIntlayer`:
-
-```tsx codeFormat="typescript"
-"use client";
-
-import { useIntlayerAsync } from "next-intlayer";
-```
-
-```javascript codeFormat="esm"
-"use client";
-
-import { useIntlayerAsync } from "next-intlayer";
-```
-
-```javascript codeFormat="commonjs"
-"use client";
-
-const { useIntlayerAsync } = require("next-intlayer");
-```
-
-Assicurati che il file di importazione sia annotato con `"use client"` in cima, se stai utilizzando Next.js App Router con componenti server e client separati.
-
-## Parametri
-
-1. **`key`**:  
-   **Tipo**: `DictionaryKeys`  
-   La chiave del dizionario utilizzata per identificare il blocco di contenuto localizzato. Questa chiave dovrebbe essere definita nei tuoi file di dichiarazione dei contenuti.
-
-2. **`locale`** (opzionale):  
-   **Tipo**: `Locales`  
-   La specifica locale che vuoi utilizzare. Se omesso, l'hook utilizza la locale dal contesto client.
-
-3. **`isRenderEditor`** (opzionale, default a `true`):  
-   **Tipo**: `boolean`  
-   Determina se il contenuto deve essere pronto per il rendering con la sovrapposizione dell'editor Intlayer. Se impostato su `false`, i dati del dizionario restituiti escluderanno le funzionalità specifiche dell'editor.
-
-## Valore di Ritorno
-
-L'hook restituisce un oggetto dizionario contenente il contenuto localizzato identificato da `key` e `locale`. Include anche un booleano `isLoading` che indica se un dizionario remoto è attualmente in fase di recupero.
-
-## Esempio di Utilizzo in Next.js
-
-### Esempio di Componente Client-Side
-
-```tsx fileName="src/components/AsyncClientComponentExample.tsx" codeFormat="typescript"
-"use client";
-
-import { useEffect, type FC } from "react";
-import { useIntlayerAsync } from "next-intlayer";
-
-export const AsyncClientComponentExample: FC = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Il contenuto si sta caricando...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      <h1>{title.value}</h1>
-      <p>{description.value}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/AsyncClientComponentExample.mjx" codeFormat="esm"
-"use client";
-
-import { useEffect } from "react";
-import { useIntlayerAsync } from "next-intlayer";
-
-const AsyncClientComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Il contenuto si sta caricando...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      <h1>{title.value}</h1>
-      <p>{description.value}</p>
-    </div>
-  );
-};
-```
-
-```jsx fileName="src/components/AsyncClientComponentExample.csx" codeFormat="commonjs"
-"use client";
-
-const { useEffect } = require("react");
-const { useIntlayerAsync } = require("next-intlayer");
-
-const AsyncClientComponentExample = () => {
-  const { title, description, isLoading } = useIntlayerAsync("async-component");
-
-  useEffect(() => {
-    if (isLoading) {
-      console.log("Il contenuto si sta caricando...");
-    }
-  }, [isLoading]);
-
-  return (
-    <div>
-      <h1>{title.value}</h1>
-      <p>{description.value}</p>
-    </div>
-  );
-};
-```
-
-**Punti chiave:**
-
-- Al rendering iniziale, `title` e `description` provengono dal dizionario della localizzazione prerenderizzata.
-- Mentre `isLoading` è `true`, viene effettuata in background una richiesta remota per recuperare un dizionario aggiornato.
-- Una volta completato il recupero, `title` e `description` vengono aggiornati con il contenuto più recente, e `isLoading` torna a `false`.
-
-## Gestione della Localizzazione degli Attributi
-
-Come con `useIntlayer`, puoi recuperare valori localizzati per attributi HTML vari (ad esempio, `alt`, `title`, `aria-label`):
-
-```tsx
-<img src={title.image.src.value} alt={title.image.alt.value} />
-```
-
-## File del Dizionario
-
-Tutte le chiavi di contenuto devono essere definite nei tuoi file di dichiarazione del contenuto per garantire la sicurezza dei tipi e prevenire errori a runtime. Questi file abilitano la validazione TypeScript, assicurandoti di fare sempre riferimento a chiavi e localizzazioni esistenti.
-
-Istruzioni per la configurazione dei file di dichiarazione dei contenuti sono disponibili [qui](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dictionary/get_started.md).
-
-## Ulteriori Informazioni
-
-- **Editor Visivo Intlayer:**  
-  Integra l'editor visivo Intlayer per gestire e modificare i contenuti direttamente dall'interfaccia utente. Maggiori dettagli [qui](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_visual_editor.md).
-
----
-
-**In sintesi**, `useIntlayerAsync` è un potente hook lato client progettato per migliorare l'esperienza utente e mantenere la freschezza dei contenuti combinando dizionari pre-renderizzati con aggiornamenti asincroni dei dizionari. Sfruttando `isLoading` e le dichiarazioni di contenuto basate su TypeScript, puoi integrare senza soluzione di continuità contenuti dinamici e localizzati nelle tue applicazioni Next.js.
-
-## Cronologia della documentazione
-
-- 5.5.10 - 2025-06-29: Inizio cronologia