Документация: Напреднало използване

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

Bulgarian

Обработка на езици с посока отдясно наляво

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

Презаписване на origin или locale

Освен използването на множество TacoTranslate провайдъри, можете също така да замените както origin, така и locale на нивата на Translate компонента и useTranslation hook-а.

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 на ниво компонент или hook.

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

Използване на 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” на испански.

Най-добри практики