Dokumentacija: Napredna uporaba

Napredno uporabo

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 ravnanje z RTL jeziki zagotavlja, da je vaša vsebina pravilno prikazana 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>
	);
}

Lahko uporabite tudi funkcijo isRightToLeftLocaleCode, da preverite trenutni jezik zunaj okolja 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 se določeni segmenti ohranijo nespremenjeni, lahko uporabite trojne oglate oklepaje. Ta funkcija je uporabna za ohranjanje izvirne oblike imen, tehničnih izrazov ali drugih vsebin, ki jih ni treba 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

Močno priporočamo uporabo več ponudnikov TacoTranslate v vaši aplikaciji. To je koristno 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 podedujejo nastavitve od kateregakoli nadrejenega ponudnika, zato vam ni 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>
	);
}

Preglasitev izvora ali jezika

Poleg uporabe več TacoTranslate ponudnikov lahko prav tako prepišete tako origin kot locale na ravneh 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 spreminjanju jezikov na strani odjemalca 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 nudi vizualni povratni signal.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

V množini

Za pravilno obravnavo množine in pravilno prikazovanje oznak glede na število v različnih jezikih velja to kot 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č jezikov 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 komponento Translate lahko dodate id, da upravljate z različnimi prevodi ali pomeni istega niza. To je posebej uporabno, kadar isti tekst zahteva različne prevode glede na kontekst. Z dodeljevanjem edinstvenih ID-jev zagotovite, da je vsak primerek niza pravilno preveden glede na njegov specifični 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