Contenu Conditionnel / Condition dans Intlayer

Comment Fonctionne la Condition

Dans Intlayer, le contenu conditionnel est obtenu via la fonction cond, qui associe des conditions spécifiques (généralement des valeurs booléennes) à leur contenu correspondant. Cette approche vous permet de sélectionner dynamiquement le contenu en fonction d'une condition donnée. Lorsque cette fonctionnalité est intégrée à React Intlayer ou Next Intlayer, le contenu approprié est automatiquement choisi en fonction de la condition fournie à l'exécution.

Configuration du Contenu Conditionnel

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

import { cond, type Dictionary } from "intlayer";const myConditionalContent = {  key: "my_key",  content: {    myCondition: cond({      true: "mon contenu lorsque c'est vrai",      false: "mon contenu lorsque c'est faux",      fallback: "mon contenu lorsque la condition échoue", // Optionnel    }),  },} satisfies Dictionary;export default myConditionalContent;

Si aucun fallback n'est déclaré, la dernière clé déclarée sera prise comme fallback si la condition n'est pas validée.

Utilisation du Contenu Conditionnel avec React Intlayer

Pour utiliser du contenu conditionnel dans un composant React, importez et utilisez le hook useIntlayer depuis le package react-intlayer. Ce hook récupère le contenu pour la clé spécifiée et vous permet de passer une condition pour sélectionner la sortie appropriée.

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ConditionalComponent: FC = () => {  const { myCondition } = useIntlayer("my_key");  return (    <div>      <p>        {          /* Sortie : mon contenu lorsque c'est vrai */          myCondition(true)        }      </p>      <p>        {          /* Sortie : mon contenu lorsque c'est faux */          myCondition(false)        }      </p>      <p>        {          /* Sortie : mon contenu lorsque la condition échoue */          myCondition("")        }      </p>      <p>        {          /* Sortie : mon contenu lorsque la condition échoue */          myCondition(undefined)        }      </p>    </div>  );};export default ConditionalComponent;

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 complémentaires sur la configuration et l'utilisation d'Intlayer dans différents environnements et frameworks.