Contenu Conditionnel / Condition dans Intlayer

Comment Fonctionne la Condition

Dans Intlayer, le contenu conditionnel est réalisé 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. Lorsqu'il est intégré à React Intlayer ou Next Intlayer, le contenu approprié est automatiquement choisi en fonction de la condition fournie au moment de l'exécution.

Configuration du Contenu Conditionnel

Pour configurer le 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 le contenu conditionnel 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 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 supplémentaires sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.