Как начать работу с i18n в ReactJS?
Благодаря тому, что ReactJS - суперпопулярная библиотека, у нас так много вариантов. Самыми популярными библиотеками i18n являются i18next и yahoo / response-intl. Сегодня я покажу вам, как интегрировать i18next в ваше приложение ReactJS.
Создать образец проекта
Я начну с самого начала и создам образец приложения на ReactJS с TypeScript.
yarn create react-app simplelocalize-i18next-example --template typescript
Установите зависимости:
npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector
Нет, мы готовы начать!
Настройка i18next
Я создам i18n.ts
файл, в который помещу всю конфигурацию i18next, после чего мы импортируем этот файл в index.ts
. Мой i18n.ts
выглядит так:
import i18n from 'i18next' import Backend from 'i18next-http-backend' import LanguageDetector from 'i18next-browser-languagedetector' import { initReactI18next } from 'react-i18next'
const projectToken = "5e13e3019cff4dc6abe36009445f0883"; const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/i18next/{{lng}}/{{ns}}/_index`;
i18n .use(Backend) .use(LanguageDetector) .use (initReactI18next) .init({ // default/fallback language fallbackLng: 'en', ns: ["default"], defaultNS: "default", //detects and caches a cookie from the language provided detection: { order: ['queryString', 'cookie'], cache: ['cookie'] }, interpolation: { escapeValue: false }, backend: { loadPath } })
export default i18n;
Проект loadPath
переменная
Создайте проект SimpleLocalize.io, чтобы получить вашу уникальную loadPath
переменную. Для этого демонстрационного проекта вы можете использовать loadPath
из приведенного выше примера!
Включить i18next
в приложении
Настройка завершена, когда вы импортируете i18n.ts
файл в index.ts
, просто добавляя import './i18n';
. Весь index.ts
файл должен выглядеть так:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import './i18n'; // import i18next configuration (!!)
ReactDOM.render ( <React.StrictMode> <Suspense fallback={<div>Loading...</div>}> <App /> </Suspense> </React.StrictMode>, document.getElementById('root') );
Мы сделали! Библиотека i18next готова к использованию.
Использование переводов в приложении
Теперь давайте воспользуемся переводами и создадим очень простую веб-страницу.
Импортировать useTranslation
крючок
Чтобы импортировать хук i18next, мы используем следующий код:
import {useTranslation} from "react-i18next";
function App () { const {t, i18n} = useTranslation (); //...
Переменная t
- это функция, используемая для загрузки переводов для данного ключа.
Использование t
в коде приложения
t
использование очень простое и понятное:
t("USE_BUTTONS_BELOW")
в HTML это будет выглядеть так:
<p>{t("USE_BUTTONS_BELOW")}</p>
Переключение между языком
Пришло время добавить возможность переключения языков. Я буду использовать простые кнопки без каких-либо причудливых стилей CSS. :) Я добавил 3 кнопки для английского, испанского и польского языков.
import React from "react"; import "./App.css"; import { useTranslation } from "react-i18next";
function App() { const { t, i18n } = useTranslation(); return ( <div> <p> {t("USE_BUTTONS_BELOW")} </p> <button onClick={() => i18n.changeLanguage("en")}>English</button> <button onClick={() => i18n.changeLanguage("es")}>Spanish</button> <button onClick={() => i18n.changeLanguage("pl")}>Polish</button> </div> ); }
export default App;
Давай проверим!
Обратите внимание, что перевод выполняется в реальном времени! Как это круто? Очень круто!
Оформить заказ в реальном времени
Код проекта доступен на GitHub.