React

Интегрируйте i1n с React, используя i1n SDK или Bridge Mode с i18next / react-intl.

Настройка

Запустите i1n init в вашем React-проекте. CLI автоматически обнаружит react-i18next или i18next, если они присутствуют, и настроит вложенный формат JSON.

Вы можете использовать SDK i1n в автономном режиме (полностью заменяя i18next) или подключить его через режим моста, чтобы сохранить существующую библиотеку.

Автономный режим

Используйте шаблон провайдера i1n React для удобства подключения «plug-and-play». Инициализируйте с помощью init(), создайте I1nProvider, который синхронизирует состояние локали с SDK, и используйте хук useI1n() в ваших компонентах.

Этот подход обеспечивает постоянный выбор локали через localStorage, переключение языка во время выполнения с помощью setLocale() и полное типобезопасное автозаполнение через сгенерированный i1n.d.ts — внешняя библиотека i18n не требуется.

Режим моста с i18next

Если ваш проект использует i18next, подключите его одной строкой: registerI1n((key, params) => i18next.t(key, params)). Функция i1n t() теперь делегирует вызовы i18next, но с строгой проверкой типов и автодополнением.

Для проектов, использующих react-intl (FormatJS), используйте: registerI1n((key, params) => intl.formatMessage({ id: key }, params)). Режим моста работает с любой функцией перевода — передайте любой колбэк (key, params) => string в registerI1n().

Развертывание

Добавьте i1n pull в шаг сборки или конвейер CI/CD. Сгенерированные файлы перевода и i1n.d.ts будут зафиксированы в вашем репозитории.

Работает с Vite, Create React App, Remix и любыми фреймворками на основе React.

src/App.tsx

import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

Bridge Mode — i18next

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

Bridge Mode — react-intl

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

Связанное

Панель управления

Руководство по веб-панели i1n: создание учетной записи, организации, ключи API, редактирование переводов и управление командой.

Режим моста

Сохраните существующую библиотеку i18n, добавив при этом безопасный автозаполнитель i1n, перевод с помощью ИИ и управление файлами.