Документация: Расширенное использование

Расширенное использование

Russian

Работа с языками, пишущимися справа налево

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 или locale

В дополнение к использованию нескольких 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” на испанский.

Лучшие практики