Dokumentacija: Napredna uporaba

Napredna uporaba

Slovenian

Ravnanje z jeziki, ki pišejo od desne proti levi

TacoTranslate olajša podporo jezikom, ki se berejo od desne proti levi (RTL), kot sta arabščina in hebrejščina, v vaših React aplikacijah. Pravilno ravnanje z jeziki RTL zagotavlja, da je vaša vsebina pravilno prikazana 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 so nekateri deli ohranjeni takšni, kot so, lahko uporabite trojne kvadratne oklepaje. Ta funkcija je uporabna za ohranjanje izvirne 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” ostala nespremenjena v prevodu.

Več ponudnikov TacoTranslate

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

Lahko preberete več o uporabi izvorov 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" />
		</>
	);
}

Upravljanje nalaganja

Pri menjavi jezika na strani odjemalca lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Med preklopom lahko prikažete indikator nalaganja, s katerim uporabniku zagotovite vizualno povratno informacijo in tako izboljšate uporabniško izkušnjo.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Za pravilno obravnavo množinskih oblik in pravilno prikazovanje oznak, odvisnih od števila, 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 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 isti niz zahteva različne prevode glede na kontekst. Z dodelitvijo edinstvenih ID-jev zagotovite, da je vsaka pojavnost niza prevedena natančno v skladu z njegovim specifičnim 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 v španščino prevede kot “Iniciar sesión”, prijava v nogi pa kot “Acceder”.

Najboljše prakse