Wariant (Variant) to zestaw plików zawartości, które współdzielą ten sam klucz słownika (key), ale każdy ma inną nazwę wariantu (variant). Intlayer serwuje odpowiedni plik na podstawie selektora przekazanego do useIntlayer.

Deklarowanie wariantów

Każdy plik reprezentuje jedną nazwaną alternatywę. Pominięcie klucza variant (lub ustawienie go na "default") oznacza dany plik jako wariant domyślny (fallback).

hero-banner.content.ts

Kopiuj kod

Skopiuj kod do schowka

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

Kopiuj kod

Skopiuj kod do schowka

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;

Używanie wariantów

Wariant domyślny

Hero.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → wariant domyślny

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

Hero.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → wariant domyślny

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

Hero.vue

Kopiuj kod

Skopiuj kod do schowka

<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

Kopiuj kod

Skopiuj kod do schowka

<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

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → wariant domyślny

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

Hero.tsx

Kopiuj kod

Skopiuj kod do schowka

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → wariant domyślny

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

hero.component.ts

Kopiuj kod

Skopiuj kod do schowka

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

Kopiuj kod

Skopiuj kod do schowka

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

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

Nazwany wariant

tsx

Kopiuj kod

Skopiuj kod do schowka

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

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

Nazwany wariant z jawnym wskazaniem lokalizacji

tsx

Kopiuj kod

Skopiuj kod do schowka

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

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

Typowe przypadki użycia

Testy A/B kopii sterowane przez klucz eksperymentu
Banery sezonowe lub promocyjne
Komunikaty powiązane z flagami funkcji (feature flags)
Lokalne kampanie marketingowe specyficzne dla danego obszaru

Kolekcje

Dynamiczne rekordy