Dokumentacija: Napredno uporabo

Napredna uporaba

Slovenian

Ravnanje z jeziki, ki se berejo od desne proti levi

TacoTranslate omogoča enostavno podporo jezikom, ki se berejo z 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 prikazana pravilno za uporabnike, 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 ponujeno 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

Za onemogočanje prevajanja določenih delov niza ali za zagotovitev, da so nekateri segmenti 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 smemo prevajati.

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

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

Lahko tukaj preberete več o uporabi izvora.

Ponudniki TacoTranslate dedujejo nastavitve od katerega koli nadrejenega ponudnika, zato vam ni treba večkrat nastavljati 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 jezika

Poleg uporabe več TacoTranslate ponudnikov lahko tudi prekrijete tako origin kot locale na ravneh komponent Translate in hook 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 jezikov na strani odjemalca lahko prenos prevodov traja nekaj trenutkov, odvisno od uporabnikove povezave. Za izboljšanje uporabniške izkušnje lahko prikažete indikator nalaganja, ki nudi vizualno povratno informacijo med preklopom.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizacija

Za pravilno ravnanje s številčnostjo in pravilno prikazovanje oznak, ki temeljijo na številu, v različnih jezikih velja naslednja dobra 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 vrednostmi locale 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 prevodov

V Translate komponento lahko dodate id, da se spopadete z različnimi prevodi ali pomeni za isti niz. To je še posebej uporabno, kadar isti tekst zahteva različne prevode glede na kontekst. Z dodelitvijo edinstvenih ID-jev zagotovite, da je vsak primer niza preveden natančno 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 prevede kot “Iniciar sesión”, prijava v nogi pa se lahko prevede kot “Acceder” v španščini.

Najboljše prakse