Comment fonctionne l'insertion

Dans Intlayer, le contenu d'insertion est réalisé via la fonction insertion, qui identifie les champs de type placeholder dans une chaîne (comme {{name}} ou {{age}}) pouvant être remplacés dynamiquement à l'exécution. Cette approche vous permet de créer des chaînes flexibles, semblables à des modèles, où des parties spécifiques du contenu sont déterminées par des données passées depuis votre application.

Lorsqu'il est intégré avec React Intlayer ou Next Intlayer, vous pouvez simplement fournir l'objet de données contenant les valeurs pour chaque placeholder, et Intlayer rendra automatiquement le contenu avec les placeholders remplacés.

Configuration du contenu d'insertion

Pour configurer le contenu d'insertion dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions d'insertion. Voici des exemples dans différents formats.

import { insert, type Dictionary } from "intlayer";const myInsertionContent = {  key: "my_key",  content: {    myInsertion: insert("Bonjour, je m'appelle {{name}} et j'ai {{age}} ans !"),  },} satisfies Dictionary;export default myInsertionContent;

Utilisation du contenu d'insertion avec React Intlayer

Pour utiliser le contenu d'insertion dans un composant React, importez et utilisez le hook useIntlayer du package react-intlayer. Ce hook récupère le contenu pour la clé spécifiée et vous permet de passer un objet qui associe chaque placeholder dans votre contenu à la valeur que vous souhaitez afficher.

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const InsertionComponent: FC = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* Résultat : "Bonjour, je m'appelle John et j'ai 30 ans !" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* Vous pouvez réutiliser la même insertion avec des valeurs différentes */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};export default InsertionComponent;

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 offrent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.