Dokumentacija: Napredno korištenje

Napredno korištenje

Bosnian

Rukovanje jezicima s desna na lijevo

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

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Također možete koristiti ponuđenu funkciju isRightToLeftLocaleCode da provjerite 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 dijelova niza ili osigurali da određeni segmenti ostanu nepromijenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za očuvanje izvornog formata imena, tehničkih termina ili bilo kojeg drugog sadržaja koji ne bi trebao biti preveden.

import {Translate} from 'tacotranslate/react';

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

U ovom primjeru, riječ “TacoTranslate” ostat će nepromijenjena u prijevodu.

Više TacoTranslate provajdera

Toplo preporučujemo korištenje više TacoTranslate provajdera u vašoj aplikaciji. To je korisno za organizovanje vaših prijevoda i stringova u različite izvore, poput zaglavlja, podnožja ili određenih sekcija.

Možete pročitati više o korištenju izvora ovdje.

TacoTranslate provajderi nasljeđuju postavke od bilo kojeg roditeljskog provajdera, tako da nećete morati ponavljati druge 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 jezičnih postavki

Pored korištenja više TacoTranslate provajdera, također možete nadjačati i izvor i lokal na nivou Translate komponente i useTranslation hooka.

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

Kada mijenjate jezik na strani klijenta, dohvat prijevoda 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 vizualnu povratnu informaciju tokom promjene.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Kako biste pravilno upravljali pluralizacijom i ispravno prikazivali oznake koje ovise o 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 providera s različitim locale vrijednostima kako je prikazano u nastavku:

Također možete prepisati locale na nivou komponente ili hooka.

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štenje ID-ova prijevoda

Možete dodati id na komponentu Translate kako biste upravljali različitim prijevodima ili značenjima za isti tekst. Ovo je posebno korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjeljivanjem jedinstvenih ID-ova osiguravate da je svaki primjerak tog teksta precizno preveden u skladu s 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 primjer, 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