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

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

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 и на hook-от 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” на шпански.

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