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