Dokumentacija: Napredna uporaba

Napredna uporaba

Slovenian

Ravnanje z jeziki, ki se berejo od desne proti levi

TacoTranslate omogoča enostavno 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 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 uporabite tudi 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 odseki ohranjeni nespremenjeni, lahko uporabite trojne oglate oklepaje. Ta funkcija je uporabna za ohranjanje izvirne oblike imen, tehničnih izrazov ali katere koli druge vsebine, ki je ne želite prevesti.

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

Zelo priporočamo uporabo več ponudnikov TacoTranslate v vaši aplikaciji. To je uporabno za organizacijo vaših prevodov in besedilnih nizov v različne izvore, na primer zaglavje, podnožje ali določene razdelke.

Lahko preberete več o uporabi originov tukaj.

TacoTranslate ponudniki dedujejo 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 tudi preglasite tako izvor kot tudi jezikovno nastavitev 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" />
		</>
	);
}

Upravljanje nalaganja

Pri menjavi jezika na odjemalski strani lahko pridobivanje prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Med preklopom lahko prikažete indikator nalaganja, kar izboljša uporabniško izkušnjo z 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, ki temeljijo na številu, v različnih jezikih, velja to 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 istočasno podpreti več jezikov, lahko uporabite več ponudnikov TacoTranslate z različnimi vrednostmi locale, 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

V komponento Translate lahko dodate id za obravnavo različnih prevodov ali pomenov istega niza. To je še posebej uporabno, ko isti niz zahteva različne prevode glede na kontekst. Z dodelitvijo edinstvenih ID-jev zagotovite, da je vsaka pojavitev niza natančno prevedena 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 se lahko prijava v glavi v španščini prevede kot “Iniciar sesión”, prijava v nogi pa kot “Acceder”.

Najboljše prakse