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

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

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.

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

Например, header login може да се преведе като „Iniciar sesión“, а footer login може да се преведе като „Acceder“ на испански.

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