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

Advanced usage

Ukrainian

Handling right-to-left languages

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';
	// ...
}

Disabling translation

Щоб вимкнути переклад певних частин рядка або гарантувати, що окремі сегменти збережуться без змін, ви можете використовувати потрійні квадратні дужки. Ця функція корисна для збереження оригінального формату імен, технічних термінів або будь-якого іншого вмісту, який не слід перекладати.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

У цьому прикладі слово “TacoTranslate” залишиться незмінним у перекладі.

Multiple TacoTranslate providers

Ми наполегливо рекомендуємо використовувати кілька 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>
	);
}

Overriding origin or 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" />
		</>
	);
}

Handling loading

При зміні мови на стороні клієнта отримання перекладів може зайняти кілька секунд залежно від з’єднання користувача. Ви можете відобразити індикатор завантаження, щоб покращити досвід користувача, надаючи візуальний зворотний зв’язок під час перемикання.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Pluralization

Щоб правильно обробляти форми множини та відображати підписи, залежні від кількості, у різних мовах, рекомендується:

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

Multiple languages

Щоб одночасно підтримувати кілька мов в одному додатку, ви можете використовувати кілька провайдерів 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>
	);
}

Using translation IDs

Ви можете додати 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” іспанською.

Best practices