Dokumentacija: Napredno korištenje

Napredno korištenje

Croatian

Rukovanje jezicima s desna na lijevo

TacoTranslate olakšava podršku jezicima koji se pišu s desna na lijevo (RTL), kao što su arapski i hebrejski, u vašim React aplikacijama. Pravilno rukovanje RTL jezicima osigurava da se vaš sadržaj ispravno 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 prijevoda

Da biste onemogućili prevođenje određenih dijelova niza ili osigurali da su određeni segmenti sačuvani nepromijenjeni, možete koristiti trostruke kvadratne zagrade. Ova značajka korisna je za održavanje izvornog oblika imena, tehničkih termina ili bilo kojeg drugog sadržaja koji se ne bi trebao prevoditi.

import {Translate} from 'tacotranslate/react';

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

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

Više pružatelja usluge TacoTranslate

Snažno preporučujemo korištenje više pružatelja TacoTranslate u vašoj aplikaciji. To je korisno za organiziranje vaših prijevoda i stringova u različite izvore, poput zaglavlja, podnožja ili određenih odjeljaka.

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

TacoTranslate provideri nasljeđuju postavke od bilo kojeg nadređenog providera, pa nećete morati ponavljati 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>
	);
}

Nadjačavanje izvora ili lokaliteta

Osim korištenja više TacoTranslate providera, također možete nadjačati origin i locale na razinama komponente Translate i hooka 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 mijenjanja jezika na strani klijenta, dohvaćanje prijevoda 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 vizualnu povratnu informaciju tijekom prebacivanja.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Za pravilno upravljanje pluralizacijom i ispravno prikazivanje oznaka 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 pružatelja usluge TacoTranslate s različitim locale vrijednostima kao što je prikazano u nastavku:

Također možete prepisati locale na razini 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 komponenti Translate kako biste omogućili različite prijevode ili značenja za isti tekst. To je posebno korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjeljivanjem jedinstvenih ID-ova osiguravate da je svaka pojava teksta točno prevedena 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 primjer, prijava u zaglavlju mogla bi se prevesti kao “Iniciar sesión”, a prijava u podnožju mogla bi se prevesti kao “Acceder” na španjolskom.

Najbolje prakse