Найкраще рішення для інтернаціоналізації (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 вашого сайту. Детальніше про origin тут.

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