Dokumentacija: Napredno korištenje

Napredno korištenje

Croatian

Rukovanje jezicima koji se pišu s desna na lijevo

TacoTranslate olakšava podršku jezicima koji se pišu s desna na lijevo (RTL), poput arapskog i hebrejskog, u vašim React aplikacijama. Ispravno 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 prevođenja

Da biste onemogućili prevođenje određenih dijelova teksta ili osigurali da neki dijelovi ostanu nepromijenjeni, možete koristiti trostruke uglaste zagrade. Ova značajka korisna je za očuvanje izvornog oblika 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 pružatelja usluge TacoTranslate

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

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

TacoTranslate provideri nasljeđuju postavke od bilo kojeg roditeljskog 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 pružatelja TacoTranslate, također možete nadjačati i izvor i jezičnu oznaku 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

Kada na klijentskoj strani mijenjate jezik, dohvaćanje prijevoda može potrajati nekoliko trenutaka, ovisno o internetskoj vezi korisnika. Možete prikazati indikator učitavanja kako biste poboljšali korisničko iskustvo i pružili vizualnu povratnu informaciju tijekom promjene.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Za pravilno rukovanje pluralizacijom i ispravan prikaz 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

Kako biste istovremeno podržali više jezika u istoj aplikaciji, možete koristiti više pružatelja usluge TacoTranslate s različitim locale vrijednostima kao što je prikazano u nastavku:

Također možete nadjačati 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 identifikatora prijevoda

Možete dodati id na komponentu Translate kako biste upravljali različitim prijevodima ili značenjima istog teksta. To je posebno korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjelom 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 može se prevesti kao “Iniciar sesión”, a prijava u podnožju može se prevesti kao “Acceder” na španjolskom.

Najbolje prakse