Обзор способов локализации React приложенийПри разработке мультиязычного сайта необходимо выбрать инструмент для хранения и отображения переводов локалей сайта.
Для React есть несколько библиотек, которые позволяют работать с несколькими локалями:
react-i18next
Библиотека для перевода локалей на несколько языков:
- Возможность хранения переводов как локально в json файлах, так и на стороннем сервере, подгружая локали через плагин на бэкенде.
- Поддержка TypeScript: типизация ключей.
- Есть хуки для перевода строк и компонент Trans для перевода JSX дерева.
- Есть поддержка популярных фреймворков: Next.js, Gatsby, Remix.
import React from 'react';
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const { t, i18n } = useTranslation();
// or const [t, i18n] = useTranslation();
return
{t('my translated text')}
}
react-intl
Библиотека для интернационализации приложения для разных локаций. Использует браузерное API Intl для интернационализации чисел, дат, относительного времени и плюрализации.
Есть как хуки, так и компоненты. Для каждого типа данных есть свой компонент. Например FormattedDate для дат, FormattedNumber для чисел, FormattedMessage для текстовых строк. Чаще всего пользуются последним – FormattedMessage. Также есть поддержка TypeScript.
import {FormattedRelative, useIntl} from 'react-intl';
const MS_IN_DAY = 1e3 * 3600 * 24
const PostDate = ({date}) => {
const intl = useIntl()
return (
)
});
LinguiJS
Библиотека использует ICU Message Format – синтаксис для выражения сообщений, как и react-intl. Библиотека предлагает использовать компонент Trans, внутри которого может быть JSX дерево. Используя babel макросы, LinguiJS переводит теги Trans в ICU MessageFormat. После чего вместо текстовых строк вставляет перевод. Например:
Read the documentation.
В файле c переводом, ключом перевода сообщения выше будет строка Read the <0>documentation..
Также в библиотеке есть CLI скрипты для извлечения сообщений из приложения и компиляции JS файла с локалями.
