Dokumentacija: Napredna uporaba

Napredna uporaba

Slovenian

Ravnanje z jeziki, ki se berejo od desne proti levi

TacoTranslate poenostavlja podporo jezikom, ki se berejo od desne proti levi (RTL), na primer arabščini in hebrejščini, v vaših React aplikacijah. Pravilna obravnava RTL-jezikov zagotavlja, da se vaša vsebina pravilno prikaže uporabnikom, ki berejo od desne proti leve.

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 izven 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 so nekateri odseki ohranjeni takšni, kot so, lahko uporabite trojne kvadratne oklepaje. Ta funkcija je uporabna za ohranjanje izvorne oblike imen, tehničnih izrazov ali katere koli druge vsebine, ki ne bi smela biti 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č TacoTranslate ponudnikov v vaši aplikaciji. To je koristno za organiziranje vaših prevodov in nizov v različne izvore, kot so zaglavje, noga ali določeni razdelki.

Lahko preberete več o uporabi izvorov tukaj.

TacoTranslate ponudniki podedujejo nastavitve od katerega koli nadrejenega ponudnika, zato vam ni treba ponavljati 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 preglasite tako izvor kot jezikovne nastavitve 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" />
		</>
	);
}

Ravnanje z nalaganjem

Pri menjavi jezika na odjemalski strani lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Prikažete lahko indikator nalaganja, da izboljšate uporabniško izkušnjo z vizualno povratno informacijo med preklopom.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Za obravnavo pluralizacije in pravilni prikaz oznak, ki temeljijo na številu, 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

Če želite v isti aplikaciji hkrati podpirati več jezikov, 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 v španščini prevede kot “Iniciar sesión”, prijava v podnožju pa kot “Acceder”.

Najboljše prakse