Автор:

Дата створення:2026-06-12Останнє оновлення:2026-06-26

Надішліть цей документ вашому улюбленому AI-асистенту

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту

Історія версій

"Випуск функції варіантів"
v9.0.012.06.2026
"`variant` тепер приймає рядок або об'єкт — колишні `meta` / динамічні записи оголошуються як об'єктні варіанти"
v9.1.026.06.2026

Вміст цієї сторінки перекладено за допомогою штучного інтелекту.

Переглянути останню версію оригінального вмісту англійською

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

Варіанти

Name: Intlayer
Author: Intlayer

Варіант — це набір файлів контенту, що мають спільний ключ словника (key), але кожен несе своє значення variant. Intlayer віддає відповідний файл на основі селектора, переданого до useIntlayer.

Значення variant може набувати двох форм:

Рядок — одна іменована альтернатива (A/B-тести, сезонні банери, feature-прапорці).
Об'єкт — структурований дискримінатор, адресований набором полів (записи CMS, контент конкретного користувача, будь-який контент із непрозорим ID як ключем). Ідентичністю є весь об'єкт: селектор має надати рівний об'єкт, щоб розв'язати запис.

Об'єктна форма замінює колишнє поле meta. Усюди, де раніше ви писали meta: { id, … }, пишіть variant: { id, … } і вибирайте її через { variant: { id, … } }.

Іменовані (рядкові) варіанти

Кожен файл представляє одну іменовану альтернативу. Пропуск variant (або значення "default") позначає його як запасний.

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;

Використання іменованих варіантів

Варіант за замовчуванням

Hero.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → варіант за замовчуванням

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

Hero.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → варіант за замовчуванням

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

Hero.vue

Копіювати код

Скопіюйте код у буфер обміну

<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

Копіювати код

Скопіюйте код у буфер обміну

<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

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → варіант за замовчуванням

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

Hero.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → варіант за замовчуванням

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

hero.component.ts

Копіювати код

Скопіюйте код у буфер обміну

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

Копіювати код

Скопіюйте код у буфер обміну

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>`;

Іменований варіант

tsx

Копіювати код

Скопіюйте код у буфер обміну

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

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

Іменований варіант із явною локаллю

tsx

Копіювати код

Скопіюйте код у буфер обміну

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

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

Об'єктні (структуровані) варіанти

Об'єктний варіант адресує контент довільним набором пар ключ-значення, оголошених у полі variant, — що дозволяє моделювати записи CMS, контент конкретного користувача або будь-який контент із непрозорим ID як ключем. Ідентичністю є весь об'єкт: селектор має надати рівний об'єкт, щоб запис було розв'язано.

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;

Використання об'єктних варіантів

Передайте відповідний об'єкт у variant. Кожне поле, оголошене у словнику, має бути надане й рівне; інакше результат — null. Порядок полів не має значення.

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>;
};

Product.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "next-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>;
};

Product.vue

Копіювати код

Скопіюйте код у буфер обміну

<script setup>
import { useIntlayer } from "vue-intlayer";

const props = defineProps({
  productId: String,
  userId: String,
});

const content = useIntlayer("product", {
  variant: { id: props.productId, userId: props.userId },
});
</script>

<template>
  <p v-if="content">{{ content.description }}</p>
</template>

Product.svelte

Копіювати код

Скопіюйте код у буфер обміну

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

export let productId: string;
export let userId: string;

const content = useIntlayer("product", {
  variant: { id: productId, userId },
});
</script>

{#if $content}
  <p>{$content.description}</p>
{/if}

Product.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "preact-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>;
};

Product.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "solid-intlayer";

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

  return (
    <>
      {content() && <p>{content().description}</p>}
    </>
  );
};

product.component.ts

Копіювати код

Скопіюйте код у буфер обміну

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

@Component({
  selector: "app-product",
  template: `
    @if (content()) {
      <p>{{ content().description }}</p>
    }
  `,
})
export class ProductComponent implements OnInit {
  @Input() productId!: string;
  @Input() userId!: string;

  content: any;

  ngOnInit() {
    this.content = useIntlayer("product", {
      variant: { id: this.productId, userId: this.userId },
    });
  }
}

product.js

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product", {  variant: { id: "prod_abcd", userId: "user_123" },});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product", {  variant: { id: "prod_abcd", userId: "user_123" },});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

З явною локаллю

tsx

Копіювати код

Скопіюйте код у буфер обміну

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

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

Відсутнє поле — немає збігу

Копіювати код

Скопіюйте код у буфер обміну

// Повертає null: відсутній `userId`, тож об'єкт не збігається з оголошеним варіантомconst content = useIntlayer("product", { variant: { id: "prod_abc" } });

// Повертає null: відсутній `userId`, тож об'єкт не збігається з оголошеним варіантомconst content = useIntlayer("product", { variant: { id: "prod_abc" } });

Режим завантаження

Об'єктні варіанти часто завантажуються ліниво. Задайте importMode у словнику, щоб керувати цим:

Копіювати код

Скопіюйте код у буфер обміну

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

export default dictionary;

Див. оптимізацію бандла для деталей про режими static, dynamic і fetch.

Типові сценарії використання

A/B-тести тексту, керовані ключем експерименту
Сезонні або рекламні банери
Повідомлення під feature-прапорцями
Маркетингові кампанії для конкретної локалі
Маркетинговий текст за товарами, керований у CMS
Контент конкретного користувача або акаунта
Будь-який контент, адресований непрозорим ID під час виконання

Колекції

Файл для кожної локалі