@intlayer/docs 5.5.8

package/fr/dictionary/content_extention_customization.md

@@ -0,0 +1,81 @@
+# Personnalisation des Extensions de Contenu
+
+## Extensions de Fichiers de Contenu
+
+Intlayer vous permet de personnaliser les extensions pour vos fichiers de déclaration de contenu. Cette personnalisation offre une flexibilité dans la gestion de projets à grande échelle et aide à éviter les conflits avec d'autres modules.
+
+### Extensions par Défaut
+
+Par défaut, Intlayer surveille tous les fichiers avec les extensions suivantes pour les déclarations de contenu :
+
+- `.content.json`
+- `.content.ts`
+- `.content.tsx`
+- `.content.js`
+- `.content.jsx`
+- `.content.mjs`
+- `.content.mjx`
+- `.content.cjs`
+- `.content.cjx`
+
+Ces extensions par défaut conviennent à la plupart des applications. Cependant, lorsque vous avez des besoins spécifiques, vous pouvez définir des extensions personnalisées pour simplifier le processus de construction et réduire le risque de conflits avec d'autres composants.
+
+### Personnalisation des Extensions de Contenu
+
+Pour personnaliser les extensions de fichiers qu'Intlayer utilise pour identifier les fichiers de déclaration de contenu, vous pouvez les spécifier dans le fichier de configuration d'Intlayer. Cette approche est bénéfique pour les projets à grande échelle où la limitation de la portée du processus de surveillance améliore les performances de construction.
+
+Voici un exemple de définition d'extensions de contenu personnalisées dans votre configuration :
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  content: {
+    fileExtensions: [".my_content.ts", ".my_content.tsx"], // Vos extensions personnalisées
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  content: {
+    fileExtensions: [".my_content.cjs", ".my_content.cjx"], // Vos extensions personnalisées
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  content: {
+    fileExtensions: [".my_content.mjs", ".my_content.mjx"], // Vos extensions personnalisées
+  },
+};
+
+module.exports = config;
+```
+
+Dans cet exemple, la configuration spécifie deux extensions personnalisées : `.my_content.ts` et `.my_content.tsx`. Intlayer surveillera uniquement les fichiers avec ces extensions pour construire les dictionnaires.
+
+### Avantages des Extensions Personnalisées
+
+- **Performances de Construction** : Réduire la portée des fichiers surveillés peut améliorer significativement les performances de construction dans les grands projets.
+- **Évitement des Conflits** : Les extensions personnalisées aident à éviter les conflits avec d'autres fichiers JavaScript ou TypeScript dans votre projet.
+- **Organisation** : Les extensions personnalisées vous permettent d'organiser vos fichiers de déclaration de contenu selon les besoins de votre projet.
+
+### Directives pour les Extensions Personnalisées
+
+Lors de la personnalisation des extensions de fichiers de contenu, gardez à l'esprit les directives suivantes :
+
+- **Unicité** : Choisissez des extensions uniques dans votre projet pour éviter les conflits.
+- **Nommage Cohérent** : Utilisez des conventions de nommage cohérentes pour une meilleure lisibilité et maintenance du code.
+- **Éviter les Extensions Communes** : Évitez d'utiliser des extensions communes comme `.ts` ou `.js` pour prévenir les conflits avec d'autres modules ou bibliothèques.
+
+## Conclusion
+
+La personnalisation des extensions de fichiers de contenu dans Intlayer est une fonctionnalité précieuse pour optimiser les performances et éviter les conflits dans les applications à grande échelle. En suivant les directives décrites dans cette documentation, vous pouvez gérer efficacement vos déclarations de contenu et assurer une intégration fluide avec les autres parties de votre projet.

package/fr/dictionary/enumeration.md

@@ -0,0 +1,221 @@
+# Énumération / Plurielisation
+
+## Comment fonctionne l'Énumération
+
+Dans Intlayer, l'énumération est réalisée via la fonction `enu`, qui associe des clés spécifiques à leur contenu correspondant. Ces clés peuvent représenter des valeurs numériques, des plages ou des identifiants personnalisés. Lorsqu'elle est utilisée avec React Intlayer ou Next Intlayer, le contenu approprié est automatiquement sélectionné en fonction de la locale de l'application et des règles définies.
+
+## Configuration de l'Énumération
+
+Pour configurer l'énumération dans votre projet Intlayer, vous devez créer un module de contenu qui inclut des définitions d'énumération. Voici un exemple d'une énumération simple pour le nombre de voitures :
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { enu, type Dictionary } from "intlayer";
+
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Moins de moins une voiture",
+      "-1": "Moins une voiture",
+      "0": "Aucune voiture",
+      "1": "Une voiture",
+      ">5": "Quelques voitures",
+      ">19": "Beaucoup de voitures",
+      "fallback": "Valeur de secours", // Optionnel
+    }),
+  },
+} satisfies Dictionary;
+
+export default carEnumeration;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { enu } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Moins de moins une voiture",
+      "-1": "Moins une voiture",
+      "0": "Aucune voiture",
+      "1": "Une voiture",
+      ">5": "Quelques voitures",
+      ">19": "Beaucoup de voitures",
+      "fallback": "Valeur de secours", // Optionnel
+    }),
+  },
+};
+
+export default carEnumeration;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { enu } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const carEnumeration = {
+  key: "car_count",
+  content: {
+    numberOfCar: enu({
+      "<-1": "Moins de moins une voiture",
+      "-1": "Moins une voiture",
+      "0": "Aucune voiture",
+      "1": "Une voiture",
+      ">5": "Quelques voitures",
+      ">19": "Beaucoup de voitures",
+      "fallback": "Valeur de secours", // Optionnel
+    }),
+  },
+};
+
+module.exports = carEnumeration;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "car_count",
+  "content": {
+    "numberOfCar": {
+      "nodeType": "enumeration",
+      "enumeration": {
+        "<-1": "Moins de moins une voiture",
+        "-1": "Moins une voiture",
+        "0": "Aucune voiture",
+        "1": "Une voiture",
+        ">5": "Quelques voitures",
+        ">19": "Beaucoup de voitures",
+        "fallback": "Valeur de secours" // Optionnel
+      }
+    }
+  }
+}
+```
+
+Dans cet exemple, `enu` associe diverses conditions à un contenu spécifique. Lorsqu'il est utilisé dans un composant React, Intlayer peut automatiquement choisir le contenu approprié en fonction de la variable donnée.
+
+> L'ordre de déclaration est important dans les énumérations Intlayer. La première déclaration valide est celle qui sera sélectionnée. Si plusieurs conditions s'appliquent, assurez-vous qu'elles sont correctement ordonnées pour éviter un comportement inattendu.
+
+> Si aucun fallback n'est déclaré, la fonction retournera `undefined` si aucune clé ne correspond.
+
+## Utilisation de l'Énumération avec React Intlayer
+
+Pour utiliser l'énumération dans un composant React, vous pouvez utiliser le hook `useIntlayer` du package `react-intlayer`. Ce hook récupère le contenu correct en fonction de l'ID spécifié. Voici un exemple d'utilisation :
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Résultat : Aucune voiture
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Résultat : Quelques voitures
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Résultat : Beaucoup de voitures
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Résultat : Valeur de secours
+        }
+      </p>
+    </div>
+  );
+};
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const CarComponent = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Résultat : Aucune voiture
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Résultat : Quelques voitures
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Résultat : Beaucoup de voitures
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Résultat : Valeur de secours
+        }
+      </p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const CarComponent = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Résultat : Aucune voiture
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Résultat : Quelques voitures
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Résultat : Beaucoup de voitures
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(0.01) // Résultat : Valeur de secours
+        }
+      </p>
+    </div>
+  );
+};
+
+module.exports = CarComponent;
+```
+
+Dans cet exemple, le composant ajuste dynamiquement sa sortie en fonction du nombre de voitures. Le contenu correct est choisi automatiquement, selon la plage spécifiée.
+
+## Ressources Supplémentaires
+
+Pour plus d'informations détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :
+
+- [Documentation CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_cli.md)
+- [Documentation React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_with_create_react_app.md)
+- [Documentation Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_with_nextjs_15.md)
+
+Ces ressources fournissent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans différents environnements et avec divers frameworks.

package/fr/dictionary/file.md

@@ -0,0 +1,206 @@
+# Intégration de Fichiers dans Intlayer
+
+## Comment Fonctionne l'Intégration de Fichiers
+
+Dans Intlayer, la fonction `file` permet d'intégrer le contenu d'un fichier externe dans un dictionnaire. Cette approche garantit qu'Intlayer reconnaît le fichier source, permettant une intégration transparente avec l'éditeur visuel et le CMS d'Intlayer. Contrairement aux méthodes directes d'`import`, `require` ou de lecture de fichiers avec `fs`, l'utilisation de `file` associe le fichier au dictionnaire, permettant à Intlayer de suivre et de mettre à jour le contenu dynamiquement lorsque le fichier est modifié.
+
+## Configuration du Contenu du Fichier
+
+Pour intégrer le contenu d'un fichier dans votre projet Intlayer, utilisez la fonction `file` dans un module de contenu. Voici des exemples démontrant différentes implémentations.
+
+### Implémentation TypeScript
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { file, type Dictionary } from "intlayer";
+
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"),
+  },
+} satisfies Dictionary;
+
+export default myFileContent;
+```
+
+### Implémentation ECMAScript Module (ESM)
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { file } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"),
+  },
+};
+
+export default myFileContent;
+```
+
+### Implémentation CommonJS
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { file } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"),
+  },
+};
+
+module.exports = myFileContent;
+```
+
+### Configuration JSON
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myFile": {
+      "nodeType": "file",
+      "value": "./path/to/file.txt",
+    },
+  },
+}
+```
+
+## Utilisation du Contenu de Fichier dans React Intlayer
+
+Pour utiliser le contenu intégré d'un fichier dans un composant React, importez et utilisez le hook `useIntlayer` du package `react-intlayer`. Cela permet de récupérer le contenu à partir de la clé spécifiée et de l'afficher dynamiquement.
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const FileComponent = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const FileComponent = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+module.exports = FileComponent;
+```
+
+## Exemple de Markdown Multilingue
+
+Pour prendre en charge des fichiers Markdown éditables multilingues, vous pouvez utiliser `file` en combinaison avec `t()` et `md()` pour définir différentes versions linguistiques d'un fichier de contenu Markdown.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { file, t, md, type Dictionary } from "intlayer";
+
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        fr: file("src/components/test.fr.md"),
+        en: file("src/components/test.en.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+} satisfies Dictionary;
+
+export default myMultilingualContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { file, t, md } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        fr: file("src/components/test.fr.md"),
+        en: file("src/components/test.en.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+};
+
+export default myMultilingualContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { file, t, md } = require("intlayer");
+
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        fr: file("src/components/test.fr.md"),
+        en: file("src/components/test.en.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+};
+```
+
+Cette configuration permet de récupérer dynamiquement le contenu en fonction de la préférence linguistique de l'utilisateur. Lorsqu'il est utilisé dans l'éditeur visuel ou le CMS d'Intlayer, le système reconnaît que le contenu provient des fichiers Markdown spécifiés et garantit qu'ils restent éditables.
+
+## Comment Intlayer Gère le Contenu des Fichiers
+
+La fonction `file` est basée sur le module `fs` de Node.js pour lire le contenu du fichier spécifié et l'insérer dans le dictionnaire. Lorsqu'elle est utilisée avec l'éditeur visuel ou le CMS d'Intlayer, Intlayer peut suivre la relation entre le dictionnaire et le fichier. Cela permet à Intlayer de :
+
+- Reconnaître que le contenu provient d'un fichier spécifique.
+- Mettre à jour automatiquement le contenu du dictionnaire lorsque le fichier lié est modifié.
+- Assurer la synchronisation entre le fichier et le dictionnaire, préservant l'intégrité du contenu.
+
+## Ressources Supplémentaires
+
+Pour plus de détails sur la configuration et l'utilisation de l'intégration de fichiers dans Intlayer, consultez les ressources suivantes :
+
+- [Documentation CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_cli.md)
+- [Documentation React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_with_create_react_app.md)
+- [Documentation Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/fr/intlayer_with_nextjs_15.md)
+- [Documentation Contenu Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/fr/dictionary/markdown.md)
+- [Documentation Contenu de Traduction](https://github.com/aymericzip/intlayer/blob/main/docs/fr/dictionary/translation.md)
+
+Ces ressources fournissent des informations supplémentaires sur l'intégration de fichiers, la gestion de contenu et l'intégration d'Intlayer avec divers frameworks.

package/fr/dictionary/function_fetching.md

@@ -0,0 +1,190 @@
+# Fonction de Récupération
+
+Intlayer vous permet de déclarer des fonctions de contenu dans vos modules de contenu, qui peuvent être synchrones ou asynchrones. Lorsque l'application se construit, Intlayer exécute ces fonctions pour obtenir le résultat de la fonction. La valeur de retour doit être un objet JSON ou une valeur simple comme une chaîne de caractères ou un nombre.
+
+> Attention : la récupération de fonction n'est actuellement pas disponible dans les déclarations de contenu JSON et les fichiers de déclarations de contenu distants.
+
+## Déclarations de Fonction
+
+Voici un exemple d'une fonction synchrone simple récupérant du contenu :
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import type { Dictionary } from "intlayer";
+
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "Ceci est le contenu rendu par une fonction",
+  },
+} satisfies Dictionary;
+
+export default functionContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+/** @type {import('intlayer').Dictionary} */
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "Ceci est le contenu rendu par une fonction",
+  },
+};
+
+export default functionContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+/** @type {import('intlayer').Dictionary} */
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "Ceci est le contenu rendu par une fonction",
+  },
+};
+
+module.exports = functionContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "function_content",
+  "content": {
+    "text": "Ceci est le contenu rendu par une fonction"
+  }
+}
+```
+
+Dans cet exemple, la clé `text` contient une fonction qui retourne une chaîne de caractères. Ce contenu peut être rendu dans vos composants React en utilisant les packages interpréteurs d'Intlayer comme `react-intlayer`.
+
+## Récupération Asynchrone de Fonction
+
+En plus des fonctions synchrones, Intlayer prend en charge les fonctions asynchrones, vous permettant de récupérer des données à partir de sources externes ou de simuler la récupération de données avec des données fictives.
+
+Voici un exemple d'une fonction asynchrone qui simule une récupération depuis un serveur :
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { setTimeout } from "node:timers/promises";
+import type { Dictionary } from "intlayer";
+
+const fakeFetch = async (): Promise<string> => {
+  // Attendre 200ms pour simuler une récupération depuis le serveur
+  return await setTimeout(200).then(
+    () => "Ceci est le contenu récupéré depuis le serveur"
+  );
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+} satisfies Dictionary;
+
+export default asyncFunctionContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { setTimeout } from "node:timers/promises";
+
+/** @type {import('intlayer').Dictionary} */
+const fakeFetch = async () => {
+  // Attendre 200ms pour simuler une récupération depuis le serveur
+  await setTimeout(200);
+  return "Ceci est le contenu récupéré depuis le serveur";
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+};
+
+export default asyncFunctionContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { setTimeout } = require("node:timers/promises");
+
+/** @type {import('intlayer').Dictionary} */
+const fakeFetch = async () => {
+  // Attendre 200ms pour simuler une récupération depuis le serveur
+  await setTimeout(200);
+  return "Ceci est le contenu récupéré depuis le serveur";
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+};
+
+module.exports = asyncFunctionContent;
+```
+
+```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
+Impossible de récupérer du contenu depuis un fichier JSON, utilisez un fichier .ts ou .js à la place
+```
+
+Dans ce cas, la fonction `fakeFetch` imite un délai pour simuler le temps de réponse du serveur. Intlayer exécute la fonction asynchrone et utilise le résultat comme contenu pour la clé `text`.
+
+## Utilisation de Contenu Basé sur des Fonctions dans des Composants React
+
+Pour utiliser du contenu basé sur des fonctions dans un composant React, vous devez importer `useIntlayer` depuis `react-intlayer` et l'appeler avec l'ID de contenu pour récupérer le contenu. Voici un exemple :
+
+```typescript fileName="**/*.jsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent: FC = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* Sortie : Ceci est le contenu rendu par une fonction */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Sortie : Ceci est le contenu récupéré depuis le serveur */}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* Sortie : Ceci est le contenu rendu par une fonction */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Sortie : Ceci est le contenu récupéré depuis le serveur */}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const MyComponent = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* Sortie : Ceci est le contenu rendu par une fonction */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* Sortie : Ceci est le contenu récupéré depuis le serveur */}
+    </div>
+  );
+};
+
+module.exports = MyComponent;
+```