Imbrication / Référencement de Sous-Contenu

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 provenant 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 devez d'abord définir 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

Voici un exemple de dictionnaire de base à imbriquer dans un autre dictionnaire :

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 deuxième 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 supplémentaires

Pour plus d'informations 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.