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 ravnanje z RTL jeziki 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>
	);
}

Prav tako lahko uporabite predlož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 nespremenjeni, lahko uporabite trojne oglate oklepaje. Ta funkcija je uporabna za ohranjanje izvorne oblike imen, tehničnih izrazov ali katere koli druge vsebine, ki je ne bi smeli prevajati.

import {Translate} from 'tacotranslate/react';

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

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

Več ponudnikov TacoTranslate

Toplo priporočamo uporabo več TacoTranslate ponudnikov v vaši aplikaciji. To je uporabno za organizacijo vaših prevodov in nizov v različne izvore, kot so vaš glavni meni, noga strani ali določeni odseki.

Lahko tukaj preberete več o uporabi izvora.

Ponudniki TacoTranslate podedujejo nastavitve od katerega koli nadrejenega ponudnika, zato ne boste morali 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 tudi preglasite tako izvor kot lokalno nastavitve na nivojih komponent 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 zamenjavi jezikov na strani odjemalca lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Med preklopom lahko prikažete indikator nalaganja, da izboljšate uporabniško izkušnjo s prikazom vizualne povratne informacije.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pomnoževanje

Za pravilno ravnanje s tvorbo množine in pravilni prikaz oznak, ki temeljijo na številu, v različnih jezikih, velja naslednje 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č jezikov hkrati znotraj iste aplikacije lahko uporabite več ponudnikov TacoTranslate z različnimi vrednostmi locale, kot je prikazano spodaj:

Prav tako lahko preglasite locale na ravni komponent ali hookov.

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 prevodov

Dodate lahko id komponenti Translate, da obdelate različne prevode ali pomene istega niza. To je posebej uporabno, kadar isti tekst zahteva različne prevode glede na kontekst. Z dodeljevanjem unikatnih ID-jev zagotovite, da je vsak pojav niza preveden natančno glede na svoj 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