Лёгкая локализация для 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 здесь.

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

Мы рекомендуем иметь закрытое и защищённое тестовое окружение, где вы можете тестировать своё производственное приложение, добавляя новые строки перед выходом в продакшен. Это помешает кому-либо кому-либо украсть ваш секретный ключ API и, возможно, раздуть ваш проект перевода добавлением нежелательных строк.