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

Разширена употреба

Bulgarian

Работа с езици, пишещи се отдясно наляво

TacoTranslate улеснява поддръжката на езици с писане отдясно наляво (RTL), като арабски и иврит, във вашите React приложения. Правилната обработка на езици с писане отдясно наляво гарантира, че вашето съдържание се показва правилно на потребителите, които четат отдясно наляво.

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

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