Документација: Напредно користење

Напредна употреба

Macedonian

Ракување со јазици од десно кон лево

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

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 компонентата за да ракувате со различни преводи или значења за иста низа. Ова е особено корисно кога истиот текст бара различни преводи во зависност од контекстот. Со доделување уникатни ID-еви, ќе осигурате секоја појава на низата да биде прецизно преведена според нејзиното специфично значење.

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

Најдобри практики