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

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

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 във вашето приложение. Това е полезно за организиране на вашите преводи и низове в различни източници, като например вашия горен колонтитул, долен колонтитул или конкретни секции.

Можете да прочетете повече за това как да използвате 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 и на нивото на hook-а 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 на ниво компонент или 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>
	);
}

Използване на идентификатори за превод

Можете да добавите 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” на испански.

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