Dokumentacija: Napredna uporaba

Napredna uporaba

Slovenian

Ravnanje z jeziki, ki se berejo 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 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 so določeni segmenti ohranjeni 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 se ne sme prevesti.

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 organizacijo 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, tako vam ne bo 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>
	);
}

Prepisovanje izvora ali lokalnih nastavitev

Poleg uporabe več TacoTranslate ponudnikov lahko tudi prepišete tako origin kot locale 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 spremembi jezika na odjemalcu lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Za izboljšanje uporabniške izkušnje 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 obravnavo pluralizacije 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 v isti aplikaciji lahko uporabite več ponudnikov TacoTranslate z različnimi locale vrednostmi, kot je prikazano spodaj:

Lahko tudi prekrijete 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

V komponento Translate lahko dodate id, da obravnavate različne prevode ali pomene istega niza. To je še posebej uporabno, kadar isti tekst zahteva različne prevode glede na kontekst. S dodelitvijo edinstvenih ID-jev zagotovite, da je vsak primer niza preveden natančno glede na njegov poseben 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 se lahko prevede kot “Acceder” v španščini.

Najboljše prakse