Продвинутое использование
Работа с языками, читающимися справа налево
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
провайдеров в вашем приложении. Это полезно для организации ваших переводов и строк по различным источникам, таким как шапка, подвал или отдельные разделы.
Вы можете узнать больше об использовании источников здесь.
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 или локали
В дополнение к использованию нескольких TacoTranslate
провайдеров, вы также можете переопределять как источник, так и локаль на уровнях компонента 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” на испанском.