Dokumentacija: Napredna upotreba

Napredna upotreba

Serbian

Rukovanje jezicima koji se pišu s desna na levo

TacoTranslate olakšava podršku jezicima koji se pišu sa desna na levo (RTL), kao što su arapski i hebrejski, u vašim React aplikacijama. Ispravno rukovanje RTL jezicima osigurava da se vaš sadržaj pravilno prikazuje korisnicima koji čitaju sa 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 funkciju isRightToLeftLocaleCode da proverite trenutni jezik van React-a.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Onemogućavanje prevođenja

Da biste onemogućili prevod za određene delove niza ili da biste osigurali da se određeni segmenti sačuvaju nepromenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za održavanje originalnog formata imena, tehničkih termina ili bilo kog drugog sadržaja koji ne bi trebalo da bude preveden.

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

Toplo preporučujemo korišćenje više TacoTranslate provajdera у вашој апликацији. Ово је корисно за организовање ваших превода и стрингова у различите изворе, као што су ваш header, footer или специфични делови.

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

Preklapanje izvora ili lokaliteta

Pored korišćenja više TacoTranslate provajdera, možete takođe prebrisati 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

Pri promeni jezika na strani klijenta, učitavanje 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 pravilno rukovanje množinom i ispravan prikaz 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 unutar iste aplikacije, možete koristiti više TacoTranslate provajdera sa različitim vrednostima locale kao što je prikazano ispod:

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 upravljali različitim prevodima ili značenjima za isti string. Ovo je posebno korisno kada isti tekst zahteva različite prevode u zavisnosti od konteksta. Dodeljivanjem jedinstvenih ID-jeva, obezbeđujete da se svaki primerak stringa precizno prevede u skladu sa njegovim 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