Autor:
    Data utworzenia:2026-06-12Ostatnia aktualizacja:2026-06-26

    Warianty

    Wariant to zestaw plików treści, które dzielą ten sam klucz słownika (key), lecz każdy ma inną wartość variant. Intlayer udostępnia odpowiedni plik na podstawie selektora przekazanego do useIntlayer.

    Wartość variant może przyjmować dwie formy:

    • Ciąg znaków — pojedyncza nazwana alternatywa (testy A/B, banery sezonowe, feature flagi).
    • Obiekt — strukturalny dyskryminator adresowany zestawem pól (rekordy CMS, treść zależna od użytkownika, dowolna treść z nieprzezroczystym ID jako kluczem). Tożsamością jest cały obiekt: selektor musi dostarczyć równy obiekt, aby rozwiązać wpis.
    Forma obiektowa zastępuje dawne pole meta. Wszędzie, gdzie wcześniej pisałeś meta: { id, … }, napisz variant: { id, … } i wybierz ją przez { variant: { id, … } }.

    Warianty nazwane (tekstowe)

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

    hero-banner.content.ts
    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
    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;

    Korzystanie z wariantów nazwanych

    Wariant domyślny

    Hero.tsx
    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>
  );
};

    Wariant nazwany

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

    Wariant nazwany z jawnym locale

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

    Warianty obiektowe (strukturalne)

    Wariant obiektowy adresuje treść dowolnym zestawem par klucz-wartość zadeklarowanych w polu variant — co umożliwia modelowanie rekordów CMS, treści zależnej od użytkownika lub dowolnej treści z nieprzezroczystym ID jako kluczem. Tożsamością jest cały obiekt: selektor musi dostarczyć równy obiekt, aby wpis został rozwiązany.

    product.abc.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product",
  variant: { id: "prod_abc", userId: "user_123" },
  content: {
    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
  },
} satisfies Dictionary;

export default dictionary;
    product.abcd.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product",
  variant: { id: "prod_abcd", userId: "user_123" },
  content: {
    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
  },
} satisfies Dictionary;

export default dictionary;

    Korzystanie z wariantów obiektowych

    Przekaż pasujący obiekt do variant. Każde pole zadeklarowane w słowniku musi zostać podane i być równe; w przeciwnym razie wynik to null. Kolejność pól nie ma znaczenia.

    Product.tsx
    import { useIntlayer } from "react-intlayer";

export const Product = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product", {
    variant: { id: productId, userId },
  });

  if (!content) return null;

  return <p>{content.description}</p>;
};

    Z jawnym locale

    tsx
    const content = useIntlayer("product", {  variant: { id: "prod_abc", userId: "user_123" },  locale: "fr",});

    Brakujące pole — brak dopasowania

    ts
    // Zwraca null: brakuje `userId`, więc obiekt nie pasuje do zadeklarowanego wariantuconst content = useIntlayer("product", { variant: { id: "prod_abc" } });

    Tryb ładowania

    Warianty obiektowe są często ładowane leniwie. Ustaw importMode w słowniku, aby to kontrolować:

    ts
    const dictionary = {
  key: "product",
  importMode: "fetch", // or "dynamic"
  variant: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

    Zobacz optymalizację bundla, aby poznać szczegóły trybów static, dynamic i fetch.

    Typowe przypadki użycia

    • Testy A/B tekstu sterowane kluczem eksperymentu
    • Banery sezonowe lub promocyjne
    • Komunikaty z feature flag
    • Kampanie marketingowe specyficzne dla locale
    • Teksty marketingowe per produkt zarządzane w CMS
    • Treść zależna od użytkownika lub konta
    • Dowolna treść adresowana nieprzezroczystym ID w czasie wykonywania
    Kolekcje
    Plik dla każdej lokalizacji