Функція t в intlayer дозволяє оголошувати контент кількома мовами. Ця функція забезпечує типобезпеку, викликаючи помилку, якщо будь-які переклади відсутні, що особливо корисно в середовищах TypeScript.

Ось приклад того, як оголосити контент із перекладами.

**/*.content.ts

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

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

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      uk: "Ласкаво просимо до нашого застосунку",
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

Налаштування локалей

Щоб забезпечити коректну обробку перекладів, ви можете налаштувати прийняті локалі в intlayer.config.ts. Ця конфігурація дозволяє визначити мови, які підтримує ваш додаток:

intlayer.config.ts

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

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

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Використання перекладів у React-компонентах

За допомогою react-intlayer ви можете використовувати переклади у React-компонентах. Ось приклад:

**/*.tsx

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

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

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

Цей компонент отримує відповідний переклад на основі поточної локалі, встановленої у вашому додатку.

Користувацькі об'єкти контенту

intlayer підтримує власні об'єкти вмісту для перекладу, що дає змогу визначати складніші структури та забезпечує type safety. Ось приклад із кастомним об'єктом:

**/*.content.ts

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

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

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      uk: {
        title: "Заголовок сторінки",
        content: "Вміст сторінки",
      },
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Оголошення контенту

Множина

Дата створення:2025-08-23Останнє оновлення:2025-08-23

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

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

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

"Ініціалізація історії"
v5.5.1029.06.2025

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

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

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

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

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

Копіювати

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

Переклад

Визначення перекладів

Ось приклад того, як оголосити контент із перекладами.

**/*.content.ts

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

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

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      uk: "Ласкаво просимо до нашого застосунку",
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

Налаштування локалей

intlayer.config.ts

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

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

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Використання перекладів у React-компонентах

За допомогою react-intlayer ви можете використовувати переклади у React-компонентах. Ось приклад:

**/*.tsx

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

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

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

Цей компонент отримує відповідний переклад на основі поточної локалі, встановленої у вашому додатку.

Користувацькі об'єкти контенту

**/*.content.ts

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

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

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      uk: {
        title: "Заголовок сторінки",
        content: "Вміст сторінки",
      },
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Оголошення контенту

Множина