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

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

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

Перевизначення джерела або локалі

Окрім використання кількох провайдерів 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” іспанською.

Найкращі практики