Contenu basé sur le genre / Genre dans Intlayer

Comment fonctionne le genre

Dans Intlayer, le contenu basé sur le genre est réalisé grâce à la fonction gender, qui associe des valeurs de genre spécifiques ('male', 'female') à leur contenu correspondant. Cette approche vous permet de sélectionner dynamiquement du contenu en fonction d'un genre donné. Lorsqu'elle est intégrée avec React Intlayer ou Next Intlayer, le contenu approprié est automatiquement choisi en fonction du genre fourni à l'exécution.

Configuration du contenu basé sur le genre

Pour configurer du contenu basé sur le genre dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions spécifiques au genre. Voici des exemples dans différents formats.

import { gender, type Dictionary } from "intlayer";

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "mon contenu pour les utilisateurs masculins",
      female: "mon contenu pour les utilisatrices féminines",
      fallback: "mon contenu lorsque le genre n'est pas spécifié", // Optionnel
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

Si aucun fallback n'est déclaré, la dernière clé déclarée sera prise comme fallback si le genre n'est pas spécifié ou ne correspond à aucun genre défini.

Utilisation du contenu basé sur le genre avec React Intlayer

Pour utiliser du contenu basé sur le genre 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 un genre pour sélectionner la sortie appropriée.

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const GenderComponent: FC = () => {
  const { myGender } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Sortie : mon contenu pour les utilisateurs masculins */
          myGender("male")
        }
      </p>
      <p>
        {
          /* Sortie : mon contenu pour les utilisatrices */
          myGender("female")
        }
      </p>
      <p>
        {
          /* Sortie : mon contenu pour les utilisateurs masculins */
          myGender("m")
        }
      </p>
      <p>
        {
          /* Sortie : mon contenu pour les utilisatrices */
          myGender("f")
        }
      </p>
      <p>
        {
          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
          myGender("")
        }
      </p>
      <p>
        {
          /* Sortie : mon contenu lorsque le genre n'est pas spécifié */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

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