Autor:

Creación:2026-06-12Última actualización:2026-06-12

Referencia esta doc a tu asistente AI favorito

Google AI mode Gemini

Perplexity Mistral

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Historial de versiones

"Lanzamiento de la función de variantes de diccionarios"
v9.0.012/6/2026

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

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

Una variante es un conjunto de archivos de contenido que comparten la misma clave de diccionario (key) pero cada uno lleva un nombre de variante (variant) diferente. Intlayer sirve el archivo apropiado en función del selector pasado a useIntlayer.

Declarar variantes

Cada archivo representa una alternativa nombrada. Omitir variant (o establecerlo en "default") lo marca como la variante por defecto (fallback).

hero-banner.content.ts

Copiar código

Copiar el código al portapapeles

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

Copiar código

Copiar el código al portapapeles

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;

Consumir variantes

Variante por defecto

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante por defecto

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

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante por defecto

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

Hero.vue

Copiar código

Copiar el código al portapapeles

<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

Copiar código

Copiar el código al portapapeles

<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

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante por defecto

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

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → variante por defecto

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

hero.component.ts

Copiar código

Copiar el código al portapapeles

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

Copiar código

Copiar el código al portapapeles

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

Variante nombrada

tsx

Copiar código

Copiar el código al portapapeles

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

Variante nombrada con configuración regional explícita

tsx

Copiar código

Copiar el código al portapapeles

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

Casos de uso típicos

Pruebas A/B impulsadas por una clave de experimento
Banners promocionales o estacionales
Mensajes bajo indicadores de función (feature flags)
Campañas de marketing específicas para una región

Registros dinámicos