Auteur:
    Aymeric PINEAU
    Création:2025-07-27Dernière mise à jour:2025-07-27

    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.

    **/*.content.ts
    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

    To utilize gender-based content within a React component, import and use the useIntlayer hook from the react-intlayer package. This hook fetches the content for the specified key and allows you to pass in a gender to select the appropriate output.

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

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

  return (
    <div>
      <p>
        {
          /* Output: my content for male users */
          myGender("male")
        }
      </p>
      <p>
        {
          /* Output: my content for female users */
          myGender("female")
        }
      </p>
      <p>
        {
          /* Output: my content for male users */
          myGender("m")
        }
      </p>
      <p>
        {
          /* Output: my content for female users */
          myGender("f")
        }
      </p>
      <p>
        {
          /* Output: my content when gender is not specified */
          myGender("")
        }
      </p>
      <p>
        {
          /* Output: my content when gender is not specified */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

    To utilize gender-based content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

    **/*.tsx
    "use client";

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

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

  return (
    <div>
      <p>{myGender("male")}</p>
      <p>{myGender("female")}</p>
    </div>
  );
};

export default GenderComponent;

    To utilize gender-based content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

    **/*.vue
    <script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { myGender } = useIntlayer("my_key");
</script>

<template>
  <div>
    <p>{{ myGender("male") }}</p>
    <p>{{ myGender("female") }}</p>
  </div>
</template>

    To utilize gender-based content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

    **/*.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my_key");
</script>

<div>
  <p>{$content.myGender("male")}</p>
  <p>{$content.myGender("female")}</p>
</div>

    To utilize gender-based content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

    **/*.tsx
    import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

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

  return (
    <div>
      <p>{myGender("male")}</p>
      <p>{myGender("female")}</p>
    </div>
  );
};

export default GenderComponent;

    To utilize gender-based content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

    **/*.tsx
    import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

  return (
    <div>
      <p>{myGender("male")}</p>
      <p>{myGender("female")}</p>
    </div>
  );
};

export default GenderComponent;

    To utilize gender-based content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-gender",
  template: `
    <div>
      <p>{{ content().myGender("male") }}</p>
      <p>{{ content().myGender("female") }}</p>
    </div>
  `,
})
export class GenderComponent {
  content = useIntlayer("my_key");
}

    To utilize gender-based content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
  document.getElementById("gender-male")!.textContent =
    newContent.myGender("male");
  document.getElementById("gender-female")!.textContent =
    newContent.myGender("female");
});

// Initial render
document.getElementById("gender-male")!.textContent = content.myGender("male");
document.getElementById("gender-female")!.textContent =
  content.myGender("female");

    Ressources supplémentaires

    Pour des informations plus détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :

    Ces ressources offrent des informations supplémentaires sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.

    ConditionInsertion