Dokumentacija: Napredno korišćenje

Napredno korišćenje

Serbian

Rukovanje jezicima koji se pišu s desna na levo

TacoTranslate olakšava podršku jezika koji se pišu s desna na levo (RTL), poput arapskog i hebrejskog, u vašim React aplikacijama. Ispravno rukovanje RTL jezicima obezbeđuje 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 pruženu isRightToLeftLocaleCode funkciju da proverite trenutni jezik izvan 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 stringa ili osigurali da su određeni segmenti sačuvani nepromenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za zadržavanje 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 provajdera TacoTranslate

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

Možete pročitati više o korišćenju origin-a ovde.

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 jezičkih podešavanja

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

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 pružajući vizuelnu povratnu informaciju tokom promene.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Za ispravno rukovanje pluralizacijom i prikazivanje oznaka zasnovanih na broju 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 u istoj aplikaciji, možete koristiti više TacoTranslate provajdera sa različitim locale vrednostima prikazanim u nastavku:

Takođe možete prebrisati 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 iste tekstualne vrednosti. Ovo je posebno korisno kada isti tekst zahteva različite prevode u zavisnosti od konteksta. Dodeljivanjem jedinstvenih ID-ova osiguravate da je svaki primerak te tekstualne vrednosti tačno 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