Розширене використання
Підтримка мов, що пишуться справа наліво
TacoTranslate полегшує підтримку мов з письмом справа наліво (RTL), таких як арабська та іврит, у ваших React-додатках. Правильне опрацювання RTL‑мов забезпечує коректне відображення вашого вмісту для користувачів, які читають справа наліво.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
Ви також можете використовувати надану функцію isRightToLeftLocaleCode
для перевірки поточної мови поза межами React.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
Вимкнення перекладу
Щоб вимкнути переклад для певних частин рядка або гарантувати, що певні сегменти збережуться без змін, ви можете використовувати потрійні квадратні дужки. Ця функція корисна для збереження оригінального формату імен, технічних термінів або будь-якого іншого вмісту, який не слід перекладати.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
У цьому прикладі слово «TacoTranslate» залишиться незмінним у перекладі.
Кілька провайдерів TacoTranslate
Ми наполегливо рекомендуємо використовувати кілька TacoTranslate
провайдерів у вашому додатку. Це корисно для організації перекладів і рядків у різних джерелах, наприклад у шапці, підвалі або певних розділах.
Ви можете дізнатися більше про використання origin-ів тут.
Провайдери TacoTranslate
успадковують налаштування від будь-якого батьківського провайдера, тому вам не доведеться повторювати інші налаштування.
import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';
const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});
function Header() {
return (
<TacoTranslate origin="header">
// ...
</TacoTranslate>
);
}
function Menu() {
return (
<TacoTranslate origin="menu">
// ...
</TacoTranslate>
);
}
export default function App() {
return (
<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
<Header />
<Menu />
</TacoTranslate>
);
}
Перевизначення origin або locale
Крім використання кількох провайдерів TacoTranslate
, ви також можете перевизначити як origin, так і locale на рівнях компонента Translate
та хуку useTranslation
.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
Обробка завантаження
При зміні мови на стороні клієнта отримання перекладів може зайняти деякий час залежно від підключення користувача. Ви можете відобразити індикатор завантаження, щоб покращити досвід користувача, надаючи візуальний зворотний зв'язок під час перемикання.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
Плюралізація
Щоб правильно обробляти форми множини й відображати мітки залежно від кількості в різних мовах, це вважається найкращою практикою:
import {Translate, useLocale} from 'tacotranslate/react';
function PhotoCount() {
const locale = useLocale();
const count = 1;
return count === 0 ? (
<Translate string="You have no photos." />
) : count === 1 ? (
<Translate string="You have 1 photo." />
) : (
<Translate
string="You have {{count}} photos."
variables={{count: count.toLocaleString(locale)}}
/>
);
}
Кілька мов
Щоб підтримувати кілька мов одночасно в межах одного додатка, ви можете використовувати кілька провайдерів TacoTranslate з різними locale
значеннями, як показано нижче:
Ви також можете перевизначити locale
на рівні компонента або хука.
import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';
const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});
function Spanish() {
return (
<TacoTranslate locale="es">
<Translate string="Hello, world in Spanish!" />
</TacoTranslate>
);
}
function Norwegian() {
return (
<TacoTranslate locale="no">
<Translate string="Hello, world in Norwegian!" />
</TacoTranslate>
);
}
export default function App() {
return (
<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
<Spanish />
<Norwegian />
</TacoTranslate>
);
}
Використання ідентифікаторів перекладу
Ви можете додати id
до компонента Translate
для обробки різних перекладів або значень одного й того ж рядка. Це особливо корисно, коли той самий текст вимагає різних перекладів залежно від контексту. Присвоюючи унікальні ідентифікатори, ви гарантуєте, що кожен випадок цього рядка буде перекладений точно відповідно до його конкретного значення.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
Наприклад, логін у заголовку може перекластися як “Iniciar sesión”, а логін у футері може перекластися як “Acceder” іспанською.