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

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

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

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

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

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

На пример, логинoт во заглавјето може да се преведе како “Iniciar sesión”, а логинoт во подножјето може да се преведе како “Acceder” на шпански.

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