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

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

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

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

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

На пример, header login може да се преведе како “Iniciar sesión”, а footer login може да се преведе како “Acceder” на шпански.

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