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

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

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

Преопределување на потекло или локал

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

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