Dokumentacija: Napredno korišćenje

Napredno korišćenje

Serbian

Rukovanje jezicima koji se pišu s desna na levo

TacoTranslate olakšava podršku jezicima koji se pišu s desna na levo (RTL), poput arapskog i hebrejskog, u vašim React aplikacijama. Pravilno rukovanje RTL jezicima osigurava da se vaš sadržaj ispravno prikazuje korisnicima koji čitaju s desna na levo.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Takođe možete koristiti ponuđenu funkciju isRightToLeftLocaleCode da proverite trenutni jezik van React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Onemogućavanje prevođenja

Da biste onemogućili prevođenje određenih delova teksta ili osigurali da određeni segmenti ostanu nepromenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za očuvanje izvornog formata imena, tehničkih termina ili bilo kog drugog sadržaja koji ne treba da se prevodi.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

U ovom primeru, reč “TacoTranslate” će ostati nepromenjena u prevodu.

Više TacoTranslate provajdera

Snažno preporučujemo korišćenje više TacoTranslate provajdera u vašoj aplikaciji. To je korisno za organizovanje vaših prevoda i stringova u različite izvore, kao što su zaglavlje, podnožje ili određeni odeljci.

Ovde možete pročitati više o korišćenju origins.

TacoTranslate provajderi nasleđuju podešavanja od bilo kog roditeljskog provajdera, tako da nećete morati da ponavljate ostala podešavanja.

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

Prepisivanje izvora ili regionalne postavke

Pored korišćenja više TacoTranslate provajdera, možete takođe prepisati i origin i locale na nivou Translate komponente i useTranslation hook-a.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Rukovanje učitavanjem

Prilikom promene jezika na strani klijenta, preuzimanje prevoda može potrajati nekoliko trenutaka, u zavisnosti od internet veze korisnika. Možete prikazati indikator učitavanja kako biste poboljšali korisničko iskustvo, pružajući vizuelnu povratnu informaciju tokom prebacivanja.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Pluralizacija

Za pravilno rukovanje pluralizacijom i prikazivanjem oznaka koje zavise od broja u različitim jezicima, ovo se smatra najboljom praksom:

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

Više jezika

Da biste podržali više jezika istovremeno unutar iste aplikacije, možete koristiti više TacoTranslate provajdera sa različitim locale vrednostima kao što je prikazano u nastavku:

Takođe možete nadjačati locale na nivou komponente ili hook-a.

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

Korišćenje identifikatora prevoda

Možete dodati id komponenti Translate kako biste razlikovali prevode ili značenja iste string vrednosti. Ovo je naročito korisno kada isti tekst zahteva različite prevode u zavisnosti od konteksta. Dodeljivanjem jedinstvenih ID-eva osiguravate da je svaki primerak stringa pravilno preveden u skladu sa svojim specifičnim značenjem.

import {Translate} from 'tacotranslate/react';

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

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

Na primer, prijava u zaglavlju može se prevesti kao “Iniciar sesión”, a prijava u podnožju može se prevesti kao “Acceder” na španskom.

Najbolje prakse