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

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

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

Преоптоварување на 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-а за превод

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

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