Dokumentacija: Napredna uporaba

Napredna uporaba

Slovenian

Ravnanje z jeziki, ki so zapisani od desne proti leve

TacoTranslate omogoča enostavno podporo jezikov, ki se berejo od desne proti levi (RTL), kot sta arabščina in hebrejščina, v vaših React aplikacijah. Pravilna obravnava 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>
	);
}

Prav tako lahko 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 deli ohranijo nespremenjeni, lahko uporabite trojne kvadratne oklepaje. Ta funkcija je uporabna za ohranjanje izvorne oblike imen, tehničnih izrazov ali katere koli druge vsebine, ki naj ne bo 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

Močno priporočamo uporabo več TacoTranslate ponudnikov v vaši aplikaciji. To je koristno za organizacijo vaših prevodov in nizov besedil v različne izvore, na primer zaglavje, nogo ali določene odseke.

Lahko preberete več o uporabi originov tukaj.

TacoTranslate ponudniki podedujejo 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>
	);
}

Prepisovanje izvora ali lokalne nastavitve

Poleg uporabe več TacoTranslate ponudnikov lahko na ravneh komponenta Translate in hooka useTranslation tudi prepišete tako izvor kot lokalno nastavitev.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Ravnanje z nalaganjem

Pri preklopu jezika na odjemalcu lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Prikaz indikatorja nalaganja lahko izboljša uporabniško izkušnjo, saj 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 obravnavo pluralizacije in prikaz oznak, odvisnih od števila, v različnih jezikih, se to šteje za najboljšo prakso:

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 znotraj iste aplikacije 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, da obravnavate različne prevode ali pomene istega niza. To je še posebej uporabno, kadar isto besedilo zahteva različne prevode glede na kontekst. Z dodelitvijo edinstvenih ID-jev zagotovite, da je vsak primer niza natančno preveden glede na njegov specifičen pomen.

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 nogi pa kot “Acceder” v španščini.

Najboljše prakse