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

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

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 и хука 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” на испански.

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