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

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

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.

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

Користење на translation IDs

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

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