Dokumentacija: Napredno korišćenje

Napredno korišćenje

Serbian

Rukovanje jezicima koji se pišu s desna na levo

TacoTranslate olakšava podržavanje jezika koji se pišu s desna na levo (RTL), kao što su arapski i hebrejski, u vašim React aplikacijama. Pravilno rukovanje RTL jezicima osigurava da se vaš sadržaj pravilno 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 biste proverili 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 su neki segmenti sačuvani nepromenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za očuvanje originalnog formata imena, tehničkih termina ili bilo kog drugog sadržaja koji ne bi trebalo prevoditi.

import {Translate} from 'tacotranslate/react';

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

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

Više provajdera TacoTranslate

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

Možete saznati više o korišćenju origin-a ovde.

TacoTranslate provajderi nasleđuju postavke od bilo kog roditeljskog provajdera, tako da nećete morati da ponavljate ostale postavke.

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 lokalnih postavki

Pored korišćenja više TacoTranslate provajdera, takođe možete prepisati i origin i locale na nivoima 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 veze korisnika. Možete prikazati indikator učitavanja kako biste poboljšali korisničko iskustvo dajuć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 ispravan prikaz oznaka koje zavise od broja u različitim jezicima, smatra se da je ovo najbolja praksa:

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 u istoj aplikaciji, 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 ID-jeva za prevod

Možete dodati id komponenti Translate da biste obradili različite prevode ili značenja istog teksta. 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 iste niske tačno preveden prema svom specifičnom značenju.

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 kao “Acceder” na španskom.

Najbolje prakse