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

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

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>
	);
}

Переопределение источника или локали

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

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