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

Розширене використання

Ukrainian

Обробка мов з напрямком справа наліво

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

Наприклад, вхід у заголовку може перекладатися як «Iniciar sesión», а вхід у підвалі може перекладатися як «Acceder» іспанською мовою.

Кращі практики