Автор:

Дата створення: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 в буфер обміну

Переклад

Name: Intlayer
Rating: 4.92 (64 reviews)
Author: Intlayer

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

Функція 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-компонентах

With react-intlayer, you can use translations in React components. Here's an example:

**/*.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;

This component fetches the corresponding translation based on the current locale set in your application.

With next-intlayer, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:

**/*.tsx

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

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

"use client";

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

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

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

export default MyComponent;

With vue-intlayer, you can use translations in Vue components. Here's an example:

**/*.vue

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

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

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

const content = useIntlayer("multi_lang");
</script>

<template>
  <div>
    <p>{{ content.welcomeMessage }}</p>
  </div>
</template>

With svelte-intlayer, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:

**/*.svelte

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

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

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

const content = useIntlayer("multi_lang");
</script>

<div>
  <p>{$content.welcomeMessage}</p>
</div>

With preact-intlayer, you can use translations in Preact components. Here's an example:

**/*.tsx

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

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

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

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

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

export default MyComponent;

With solid-intlayer, you can use translations in SolidJS components. Here's an example:

**/*.tsx

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

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

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

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

export default MyComponent;

With angular-intlayer, you can use translations in Angular components. Here's an example:

app.component.ts

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

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

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

@Component({
  selector: "app-my-component",
  template: `
    <div>
      <p>{{ content().welcomeMessage }}</p>
    </div>
  `,
})
export class MyComponent {
  content = useIntlayer("multi_lang");
}

With vanilla-intlayer, you can use translations by subscribing to content changes. Here's an example:

**/*.ts

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

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

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
  document.getElementById("welcome-message")!.textContent = String(
    newContent.welcomeMessage
  );
});

// Initial render
document.getElementById("welcome-message")!.textContent = String(
  content.welcomeMessage
);

Оголошення контенту Множина