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

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

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

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

Преоптоварување на потеклото или јазичната поставка

Покрај користењето на повеќе TacoTranslate провајдери, исто така можете да ги прекрите и origin и locale на нивото на Translate компонентата и useTranslation Hook.

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-а за превод

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

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