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), 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 priloženu isRightToLeftLocaleCode funkciju za provjeru trenutnog jezika izvan React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Onemogućavanje prijevoda

Da onemogućite prevođenje određenih dijelova niza ili osigurate da se određeni segmenti sačuvaju nepromijenjeni, možete koristiti trostruke kvadratne zagrade. Ova značajka korisna je za održavanje izvornog oblika imena, tehničkih izraza 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 TacoTranslate

Snažno preporučujemo korištenje više TacoTranslate providera u vašoj aplikaciji. To je korisno za organiziranje vaših prijevoda i tekstova u različite izvore, kao što su zaglavlje, podnožje ili određeni odjeljci.

Možete saznati više o korištenju originsa ovdje.

TacoTranslate provideri nasljeđuju postavke od bilo kojeg nadređenog providera, 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 lokalizacije

Osim korištenja više TacoTranslate pružatelja, također možete nadjačati i izvor i lokalne postavke (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

Pri promjeni jezika na strani klijenta, preuzimanje 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 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

Da biste u istoj aplikaciji istovremeno podržali više jezika, možete koristiti više TacoTranslate pružatelja 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 ID-ova prijevoda

Možete dodati id komponenti Translate kako biste upravljali različitim prijevodima ili značenjima iste niske. Ovo je posebno korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjelom jedinstvenih ID-ova osiguravate da je svaki primjerak niske točno preveden prema njegovu 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