Лучшее решение для интернационализации (i18n) в React-приложениях
Хотите расширить ваше React-приложение и выйти на новые рынки? TacoTranslate значительно упрощает локализацию ваших React-приложений, позволяя вам без лишних хлопот охватить глобальную аудиторию.
Почему стоит выбрать TacoTranslate для React?
- Бесшовная интеграция: Создана специально для приложений на React, TacoTranslate легко интегрируется в ваш существующий рабочий процесс.
- Автоматический сбор строк: Больше не нужно вручную управлять JSON-файлами. TacoTranslate автоматически собирает строки из вашего кода.
- Переводы на базе ИИ: Используйте силу ИИ для получения контекстно точных переводов, соответствующих тону вашего приложения.
- Мгновенная поддержка языков: Добавляйте поддержку новых языков одним кликом, делая ваше приложение доступным по всему миру.
Как это работает
Установите пакет TacoTranslate с помощью npm:
npm install tacotranslateПосле установки модуля вам нужно создать аккаунт TacoTranslate, проект перевода и соответствующие ключи API. Создайте аккаунт здесь. Это бесплатно, и не требует ввода данных кредитной карты.
В интерфейсе приложения TacoTranslate создайте проект и перейдите на вкладку API-ключей. Создайте один read ключ и один read/write ключ. Мы сохраним их как переменные окружения. read ключ — это то, что мы называем public, а read/write ключ — secret. Например, вы можете добавить их в файл .env в корне вашего проекта.
Вам также потребуется добавить ещё две переменные окружения: TACOTRANSLATE_DEFAULT_LOCALE и TACOTRANSLATE_ORIGIN.
TACOTRANSLATE_DEFAULT_LOCALE: Код локали по умолчанию для резервного варианта. В этом примере мы установим его вenдля английского.TACOTRANSLATE_ORIGIN: «папка», в которой будут храниться ваши строки, например URL вашего сайта. Подробнее об origins здесь.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.comНи в коем случае не допускайте утечки секретного API-ключа read/write в клиентских production-средах.
Настройка TacoTranslate
Инициализируйте TacoTranslate в вашем React-приложении, обернув ваше приложение в провайдер контекста TacoTranslate:
import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';
const tacoTranslate = createTacoTranslateClient({
apiKey: 'YOUR_API_KEY',
});
export default function App() {
const [locale, setLocale] = useState('en');
return (
<TacoTranslate client={tacoTranslate} locale={locale}>
<Translate string="Hello, world!"/>
</TacoTranslate>
);
}Теперь вы можете использовать компонент Translate в любом месте вашего приложения для отображения переведённого текста! Обязательно ознакомьтесь с нашей документацией для получения дополнительной информации и руководств по внедрению, адаптированных к вашей конфигурации.
import {Translate} from 'tacotranslate/react';
export default async function Component() {
return (
<Translate string="Hello? This is TacoTranslate speaking." />
);
}Преимущества использования TacoTranslate
- Экономия времени: Автоматизирует утомительный процесс локализации и сбора строк, экономя ваше драгоценное время.
- Экономически выгодно: Снижает потребность в ручных переводах, уменьшая ваши расходы на локализацию.
- Повышенная точность: Переводы на основе ИИ обеспечивают контекстно корректные и высококачественные результаты.
- Масштабируемое решение: Легко добавляйте поддержку новых языков по мере роста вашего приложения и клиентской базы.
Начните сегодня!
Ваше React-приложение будет автоматически переведено, когда вы добавите любые строки в компонент Translate. Обратите внимание, что только окружения с разрешениями read/write на ключ API смогут создавать новые строки для перевода.
Мы рекомендуем иметь закрытое и защищённое промежуточное (staging) окружение, где вы сможете протестировать своё рабочее приложение и добавить новые строки до его запуска в продакшен. Это предотвратит кражу вашего секретного ключа API и потенциальное разрастание вашего проекта переводов за счёт добавления несанкционированных строк.
Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.
TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!