Dokumentacija: Napredno korištenje

Napredno korištenje

Bosnian

Rukovanje jezicima koji se pišu s desna na lijevo

TacoTranslate olakšava podršku za jezike koji se čitaju s desna na lijevo (RTL), kao što su arapski i hebrejski, u vašim React aplikacijama. Ispravno upravljanje 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đe možete koristiti prilož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 niza ili osigurali da su određeni segmenti sačuvani takvi kakvi jesu, možete koristiti trostruke uglaste zagrade. Ova funkcija je korisna za održavanje izvornog 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 pružalaca

Snažno preporučujemo korištenje više TacoTranslate provajdera 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 izvora ovdje.

TacoTranslate provajderi nasljeđuju postavke od bilo kojeg roditeljskog provajdera, 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 jezične postavke

Osim korištenja više TacoTranslate provajdera, također možete prebrisati i origin i locale na nivou 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 mijenjate jezik na klijentskoj strani, dohvat prevoda može potrajati nekoliko trenutaka, zavisno od veze korisnika. Možete prikazati indikator učitavanja kako biste poboljšali korisničko iskustvo pružajući vizuelnu povratnu informaciju tokom prelaska.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Da biste ispravno upravljali pluralizacijom i prikazivali oznake temeljene na 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 istovremeno podržali više jezika unutar iste aplikacije, možete koristiti više TacoTranslate provajdera s različitim locale vrijednostima kako je prikazano u nastavku:

Također možete nadjačati locale na nivou 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 za prijevode

Možete dodati id komponenti Translate kako biste upravljali različitim prijevodima ili značenjima iste tekstualne vrijednosti. Ovo je posebno korisno kada isti tekst zahtijeva različite prijevode ovisno o kontekstu. Dodjeljivanjem jedinstvenih ID-ova osiguravate da je svaki primjerak te tekstualne vrijednosti pravilno preveden u skladu s njezinim specifičnim značenjem.

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 španskom.

Najbolje prakse