Документація: функція t у react-intlayer

Функція t у пакеті react-intlayer, це базовий інструмент для вбудованої інтернаціоналізації у вашому React-додатку. Вона дозволяє визначати переклади безпосередньо в компонентах, що спрощує відображення локалізованого контенту залежно від поточної локалі.

Огляд

Функція t використовується для надання перекладів для різних локалей безпосередньо у ваших компонентах. Передаючи об'єкт, що містить переклади для кожної підтримуваної локалі, t повертає відповідний переклад на основі поточного контексту локалі у вашій React-аплікації.

Основні можливості

• Вбудовані переклади: Ідеально підходить для швидкого, вбудованого тексту, який не вимагає окремого оголошення контенту.
• Автоматичний вибір локалі: Автоматично повертає переклад, що відповідає поточній локалі.
• Підтримка TypeScript: Забезпечує типобезпеку та автодоповнення при використанні з TypeScript.
• Легка інтеграція: Працює безшовно в React-компонентах.

Сигнатура функції

t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string

Параметри

• translations: Об'єкт, де ключі, коди локалей (наприклад, en, fr, es), а значення, відповідні перекладені рядки.

Повертає

• Рядок, що містить перекладений контент для поточної локалі.

Приклади використання

Базове використання t в компоненті

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

export const ComponentExample: FC = () => {
  return (
    <div>
      <p>
        {t({
          uk: "Це приклад компонента",
          en: "This is an example of a component",
          fr: "Ceci est un exemple de composant",
          es: "Este es un ejemplo de componente",
        })}
      </p>
    </div>
  );
};

Вбудовані переклади в атрибутах

Функція t особливо корисна для вбудованих перекладів у JSX-атрибутах. При локалізації атрибутів, таких як alt, title, href або aria-label, ви можете використовувати t безпосередньо в атрибуті.

<button
  aria-label={t({
    uk: "Відправити",
    en: "Submit",
    fr: "Soumettre",
    es: "Enviar",
  })}
>
  {t({
    uk: "Відправити",
    en: "Submit",
    fr: "Soumettre",
    es: "Enviar",
  })}
  <img
    src="/path/to/image"
    alt={t({
      uk: "Чудовий пейзаж",
      en: "A beautiful scenery",
      fr: "Un beau paysage",
      es: "Un hermoso paisaje",
    })}
  />
</button>

Розширені теми

Інтеграція з TypeScript

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

import { t, type IConfigLocales } from "react-intlayer";

const translations: IConfigLocales<string> = {
  uk: "Ласкаво просимо",
  en: "Welcome",
  fr: "Bienvenue",
  es: "Bienvenido",
};

const greeting = t(translations);

Визначення локалі та контекст

У react-intlayer поточна локаль керується через IntlayerProvider. Переконайтеся, що цей провайдер обгортає ваші компоненти та що проп locale передається правильно.

Приклад:

import type { FC } from "react";
import type { Locales } from "intlayer";
import { IntlayerProvider } from "react-intlayer";

const App: FC<{ locale: Locales }> = ({ locale }) => (
  <IntlayerProvider locale={locale}>
    {/* Ваші компоненти тут */}
  </IntlayerProvider>
);

Поширені помилки та усунення несправностей

t повертає undefined або неправильний переклад

• Причина: Поточна локаль неправильно встановлена або для поточної локалі відсутній переклад.
• Рішення:
  • Переконайтеся, що IntlayerProvider правильно налаштований з відповідною locale.
  • Переконайтеся, що ваш об'єкт перекладів містить усі необхідні локалі.

Відсутні переклади в TypeScript

• Причина: Об'єкт перекладів не відповідає вимогам необхідних локалей, що призводить до помилок TypeScript.
• Рішення: Використовуйте тип IConfigLocales для забезпечення повноти ваших перекладів.

const translations: IConfigLocales<string> = {
  en: "Text",
  fr: "Texte",
  // es: 'Texto', // Відсутність 'es' спричинить помилку TypeScript
};

const text = t(translations);

Поради для ефективного використання

1. Використовуйте t для простих вбудованих перекладів: Ідеально підходить для перекладу невеликих фрагментів тексту безпосередньо в ваших компонентах.
2. Віддавайте перевагу useIntlayer для структурованого контенту: Для складніших перекладів та повторного використання контенту визначайте його в declaration files і використовуйте useIntlayer.
3. Послідовне передавання локалі: Переконайтеся, що локаль послідовно передається по всьому застосунку через IntlayerProvider.
4. Використовуйте TypeScript: Застосовуйте типи TypeScript, щоб виявляти відсутні переклади та гарантувати типобезпеку.

Висновок

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

Для докладнішого опису використання та просунутих можливостей зверніться до документації react-intlayer.

Примітка: Не забудьте належним чином налаштувати IntlayerProvider, щоб поточна локаль правильно передавалася вашим компонентам. Це критично важливо для того, щоб функція t повертала коректні переклади.