Auteur:

Création:2026-06-12Dernière mise à jour:2026-06-12

Référencez cette doc à votre assistant AI préféré

Google AI mode Gemini

Perplexity Mistral

Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix

Historique des versions

"Lancement de la fonctionnalité des variantes de dictionnaires"
v9.0.012/06/2026

Le contenu de cette page a été traduit à l'aide d'une IA.

Voir la dernière version du contenu original en anglais

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Variantes

Une variante est un ensemble de fichiers de contenu qui partagent la même clé de dictionnaire (key) mais portent chacun un nom de variante (variant) différent. Intlayer sert le fichier approprié en fonction du sélecteur passé à useIntlayer.

Déclarer des variantes

Chaque fichier représente une alternative nommée. Omettre variant (ou le définir sur "default") le marque comme valeur par défaut (fallback).

hero-banner.content.ts

Copier le code

Copier le code dans le presse-papiers

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

const dictionary = {
  key: "hero-banner",
  variant: "default",
  content: {
    headline: t({
      en: "Build faster with Intlayer",
      fr: "Développez plus vite avec Intlayer",
    }),
    cta: t({ en: "Get started", fr: "Commencer" }),
  },
} satisfies Dictionary;

export default dictionary;

hero-banner.black-friday.content.ts

Copier le code

Copier le code dans le presse-papiers

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

const dictionary = {
  key: "hero-banner",
  variant: "black_friday",
  content: {
    headline: t({
      en: "50 % off — today only",
      fr: "−50 % — aujourd'hui seulement",
    }),
    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
  },
} satisfies Dictionary;

export default dictionary;

Consommer des variantes

Variante par défaut

Hero.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante par défaut

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante par défaut

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.vue

Copier le code

Copier le code dans le presse-papiers

<script setup>
import { useIntlayer } from "vue-intlayer";
const { headline, cta } = useIntlayer("hero-banner");
</script>

<template>
  <section>
    <h1>{{ headline }}</h1>
    <a>{{ cta }}</a>
  </section>
</template>

Hero.svelte

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("hero-banner");
</script>

<section>
  <h1>{$content.headline}</h1>
  <a>{$content.cta}</a>
</section>

Hero.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante par défaut

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → variante par défaut

  return (
    <section>
      <h1>{content().headline}</h1>
      <a>{content().cta}</a>
    </section>
  );
};

hero.component.ts

Copier le code

Copier le code dans le presse-papiers

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-hero",
  template: `
    <section>
      <h1>{{ content().headline }}</h1>
      <a>{{ content().cta }}</a>
    </section>
  `,
})
export class HeroComponent {
  content = useIntlayer("hero-banner");
}

hero.js

Copier le code

Copier le code dans le presse-papiers

import { useIntlayer } from "vanilla-intlayer";const { headline, cta } = useIntlayer("hero-banner");document.body.innerHTML = `  <section>    <h1>${headline}</h1>    <a>${cta}</a>  </section>`;

Variante nommée

tsx

Copier le code

Copier le code dans le presse-papiers

const { headline, cta } = useIntlayer("hero-banner", {  variant: "black_friday",});

Variante nommée avec locale explicite

tsx

Copier le code

Copier le code dans le presse-papiers

const content = useIntlayer("hero-banner", {  variant: "black_friday",  locale: "fr",});

Cas d'utilisation typiques

Tests A/B pilotés par une clé d'expérimentation
Bannières promotionnelles ou saisonnières
Messages soumis à des feature flags
Campagnes marketing spécifiques à une zone géographique

Enregistrements dynamiques