Лёгкая локализация для приложений на 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 вашего сайта. Узнайте больше об источниках здесь.

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Ни в коем случае не раскрывайте секретный read/write API-ключ в клиентских продакшн-средах.

Настройка 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 и потенциальное раздувание проекта переводов путём добавления вредоносных строк.