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

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

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 или локали

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

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