Автор:

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

Надішліть цей документ вашому улюбленому AI-асистентуChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

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

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

"Випуск функції варіантів словників"
v9.0.012.06.2026

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

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

Редагувати цей документ

Якщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.

Посилання на документацію на GitHub

Копіювати

Скопіювати документацію у форматі Markdown в буфер обміну

Варіанти

Name: Intlayer
Author: Intlayer

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

Оголошення варіантів

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

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

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

tsx

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

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

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

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

tsx

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

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

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

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

A/B-тестування текстів, кероване ключем експерименту
Сезонні або промо-банери
Повідомлення, керовані прапорцями функцій (feature flags)
Маркетингові кампанії для конкретних регіонів

Колекції Динамічні записи