Imbrication / Référencement de contenu imbriqué

Comment fonctionne l'imbrication

Dans Intlayer, l'imbrication est réalisée via la fonction nest, qui vous permet de référencer et de réutiliser du contenu à partir d'un autre dictionnaire. Au lieu de dupliquer le contenu, vous pouvez pointer vers un module de contenu existant en utilisant sa clé.

Configuration de l'imbrication

Pour configurer l'imbrication dans votre projet Intlayer, vous définissez d'abord le contenu de base que vous souhaitez réutiliser. Ensuite, dans un module de contenu séparé, vous utilisez la fonction nest pour importer ce contenu.

Dictionnaire de base

Ci-dessous un exemple d'un dictionnaire de base avec du contenu imbriqué :

import { type Dictionary } from "intlayer";const firstDictionary = {  key: "key_of_my_first_dictionary",  content: {    content: "content",    subContent: {      contentNumber: 0,      contentString: "string",    },  },} satisfies Dictionary;export default firstDictionary;

Référencement avec Nest

Créez maintenant un autre module de contenu qui utilise la fonction nest pour référencer le contenu ci-dessus. Vous pouvez référencer l'intégralité du contenu ou une valeur imbriquée spécifique :

import { nest, type Dictionary } from "intlayer";const myNestingContent = {  key: "key_of_my_second_dictionary",  content: {    // Référence l'intégralité du dictionnaire :    fullNestedContent: nest("key_of_my_first_dictionary"),    // Référence une valeur imbriquée spécifique :    partialNestedContent: nest(      "key_of_my_first_dictionary",      "subContent.contentNumber"    ),  },} satisfies Dictionary;export default myNestingContent;

En tant que second paramètre, vous pouvez spécifier un chemin vers une valeur imbriquée dans ce contenu. Lorsqu'aucun chemin n'est fourni, l'intégralité du contenu du dictionnaire référencé est retournée.

Utilisation de l'imbrication avec React Intlayer

Pour utiliser du contenu imbriqué dans un composant React, utilisez le hook useIntlayer du package react-intlayer. Ce hook récupère le contenu correct en fonction de la clé spécifiée. Voici un exemple d'utilisation :

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const NestComponent: FC = () => {  const { fullNestedContent, partialNestedContent } = useIntlayer(    "key_of_my_second_dictionary"  );  return (    <div>      <p>        Contenu imbriqué complet : {JSON.stringify(fullNestedContent)}        {/* Sortie : {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Valeur imbriquée partielle : {partialNestedContent}        {/* Sortie : 0 */}      </p>    </div>  );};export default NestComponent;

Ressources complémentaires

Pour des informations plus détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :

• Documentation CLI Intlayer
• Documentation React Intlayer
• Documentation Next Intlayer

Ces ressources fournissent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans différents environnements et avec divers frameworks.