Dokumentacija: Napredna upotreba

Napredno korištenje

Croatian

Rukovanje jezicima s smjerom pisanja s desna na lijevo

TacoTranslate olakšava podršku jezicima s pravcem pisanja 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 za provjeru trenutačnog jezika izvan React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Onemogućavanje prijevoda

Da biste onemogućili prijevod za određene dijelove niza ili osigurali da neki segmenti ostanu nepromijenjeni, možete koristiti trostruke uglate zagrade. Ova značajka je korisna za održavanje izvornog formata imena, tehničkih termina ili bilo kojeg drugog sadržaja koji ne treba 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 TacoTranslate pružatelja usluga

Toplo preporučujemo korištenje više TacoTranslate providera u vašoj aplikaciji. To 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 izvora ovdje.

TacoTranslate provideri nasljeđuju postavke od bilo kojeg roditeljskog providera, tako da nećete morati ponavljati nijednu drugu postavku.

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

Pregazivanje podrijetla ili lokaliteta

Uz korištenje više TacoTranslate providera, možete također nadjačati i origin i locale na razinama 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 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 promjene.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Za pravilno rukovanje množinom i prikaz oznaka temeljenih na broju na 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

Za istovremenu podršku više jezika unutar iste aplikacije, možete koristiti više TacoTranslate provider-a s različitim vrijednostima locale kao što je prikazano dolje:

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 ID-jeva prijevoda

Možete dodati id komponenti Translate kako biste upravljali različitim prijevodima ili značenjima za isti niz. Ovo je posebno korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjeljivanjem jedinstvenih ID-ova osiguravate da je svaki primjerak niza toč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 se prevesti kao “Iniciar sesión”, a prijava u podnožju kao “Acceder” na španjolskom.

Najbolje prakse