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

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

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

Можете да прочитате повеќе за користење на origin-ите овде.

Провајдерите на 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 компонентата и 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“ на шпански.

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