Dokumentacija: Napredna upotreba

Napredno korištenje

Bosnian

Rukovanje jezicima s desna na lijevo

TacoTranslate olakšava podršku jezicima koji se čitaju s desna na lijevo (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 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 za provjeru trenutnog jezika izvan React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Onemogućavanje prevođenja

Da biste onemogućili prijevod za određene dijelove stringa ili osigurali da se određeni segmenti sačuvaju nepromijenjeni, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za održavanje originalnog 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

Snažno preporučujemo korištenje više TacoTranslate providera u vašoj aplikaciji. Ovo je korisno za organizaciju vaših prijevoda i nizova u različite izvore, poput zaglavlja, podnožja ili određenih sekcija.

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

TacoTranslate provajderi naslijeđ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>
	);
}

Prekoračivanje podrijetla ili lokaliteta

Pored korištenja više TacoTranslate providera, možete također prebrisati i origin i locale na nivoima 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

Prilikom promjene jezika na klijentskoj strani, dohvaćanje prevoda može potrajati nekoliko trenutaka, ovisno o vezi 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
	);
}

Pojednina i množina

Za pravilno rukovanje množinom i ispravan prikaz oznaka zasnovanih na broju u različitim jezicima, smatra se 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

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

Također 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štenje ID-jeva za prijevod

Možete dodati id komponenti Translate kako biste upravljali različitim prijevodima ili značenjima za isti niz. Ovo je naročito korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjeljivanjem jedinstvenih ID-eva osiguravate da je svaki primjerak niza tačno preveden prema njegovom 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 primjer, prijava u zaglavlju može biti prevedena kao “Iniciar sesión”, a prijava u podnožju kao “Acceder” na španski.

Najbolje prakse