Dokumentacija: Napredna uporaba

Napredna uporaba

Slovenian

Obravnavanje jezikov, ki se berejo od desne proti levi

TacoTranslate olajša podporo jezikom, ki uporabljajo zapis od desne proti levi (RTL), kot sta arabščina in hebrejščina, v vaših React aplikacijah. Pravilno obravnavanje RTL jezikov zagotavlja, da se vaša vsebina pravilno prikaže uporabnikom, ki berejo od desne proti levi.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Lahko tudi uporabite priloženo funkcijo isRightToLeftLocaleCode za preverjanje trenutnega jezika zunaj React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Onemogočanje prevajanja

Če želite onemogočiti prevajanje določenih delov niza ali zagotoviti, da se določeni odseki ohranijo v izvirni obliki, lahko uporabite trojne kvadratne oklepaje. Ta funkcija je uporabna za ohranjanje izvirne oblike imen, tehničnih izrazov ali katere koli druge vsebine, ki naj ne bi bila prevedena.

import {Translate} from 'tacotranslate/react';

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

V tem primeru bo beseda “TacoTranslate” v prevodu ostala nespremenjena.

Več ponudnikov TacoTranslate

Toplo priporočamo uporabo več ponudnikov TacoTranslate v vaši aplikaciji. To je koristno za organizacijo vaših prevodov in nizov po različnih izvorih, kot so zaglavje, podnožje ali določeni razdelki.

Lahko tukaj preberete več o uporabi izvorov.

Ponudniki TacoTranslate dedujejo nastavitve od katerega koli nadrejenega ponudnika, zato vam ne bo treba ponavljati nobenih drugih nastavitev.

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

Preglasitev izvora ali lokalne nastavitve

Poleg uporabe več TacoTranslate ponudnikov lahko tudi prekrijete tako izvor kot jezikovno nastavitev na ravneh komponente Translate in 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" />
		</>
	);
}

Upravljanje nalaganja

Ko na odjemalcu spreminjate jezik, lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Da izboljšate uporabniško izkušnjo, lahko prikažete indikator nalaganja, ki med preklopom zagotavlja vizualno povratno informacijo.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Za pravilno upravljanje pluralizacije in prikaz oznak, ki temeljijo na številu, v različnih jezikih, je to najboljša praksa:

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

Več jezikov

Za podporo več jezikom hkrati v isti aplikaciji lahko uporabite več ponudnikov TacoTranslate z različnimi locale vrednostmi, kot je prikazano spodaj:

Lahko tudi preglasite locale na ravni komponente ali 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>
	);
}

Uporaba ID-jev za prevode

Lahko dodate id komponenti Translate za upravljanje različnih prevodov ali pomenov istega niza. To je še posebej uporabno, kadar isti tekst zahteva različne prevode glede na kontekst. Z dodelitvijo enoličnih ID-jev zagotovite, da je vsaka pojavitev niza natančno prevedena v skladu s svojim pomenom.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Na primer, prijava v glavi se lahko prevede kot “Iniciar sesión”, prijava v podnožju pa se lahko prevede kot “Acceder” v španščini.

Najboljše prakse