Легка локалізація для 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 та потенційно роздмухав ваш проєкт перекладів шляхом додавання небажаних рядків.