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

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

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 в вашем приложении. Это полезно для организации ваших переводов и строк по разным источникам, таким как заголовок, подвал или конкретные разделы.

Вы можете читать больше о использовании origins здесь.

Провайдеры 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" />
	);
}

Например, header login может переводиться как «Iniciar sesión», а footer login — как «Acceder» на испанском.

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