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

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

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

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