Dokumentacija: Išplėstinis naudojimas

Išplėstinis naudojimas

Lithuanian

Iš dešinės į kairę rašomų kalbų tvarkymas

TacoTranslate palengvina iš dešinės į kairę (RTL) rašomų kalbų, tokių kaip arabų ir hebrajų, palaikymą jūsų React programose. Tinkamas RTL kalbų tvarkymas užtikrina, kad jūsų turinys būtų teisingai rodomas vartotojams, kurie skaito iš dešinės į kairę.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Taip pat galite naudoti pateiktą isRightToLeftLocaleCode funkciją, norėdami patikrinti dabartinę kalbą už React ribų.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

Vertimo išjungimas

Norėdami išjungti vertimą tam tikroms eilutės dalims arba užtikrinti, kad tam tikri segmentai būtų palikti nepakitę, galite naudoti trigubas kvadratines skliausteles. Ši funkcija yra naudinga išlaikant vardų, techninių terminų ar bet kokio kito turinio, kurio nereikėtų versti, pradinį formatą.

import {Translate} from 'tacotranslate/react';

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

Šiame pavyzdyje žodis „TacoTranslate“ vertime liks nepakitęs.

Keli TacoTranslate teikėjai

Primygtinai rekomenduojame naudoti kelis TacoTranslate teikėjus savo programoje. Tai naudinga norint organizuoti vertimus ir eilutes pagal skirtingas kilmes, pavyzdžiui antraštę, poraštę ar konkrečias skiltis.

Galite sužinoti daugiau apie originų naudojimą čia.

TacoTranslate tiekėjai paveldi nustatymus iš bet kurio aukštesniojo tiekėjo, todėl jums nereikės kartoti jokių kitų nustatymų.

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>
	);
}

Pakeisti origin arba locale

Be kelių TacoTranslate tiekėjų naudojimo, taip pat galite pakeisti tiek originą, tiek lokalę Translate komponento ir useTranslation hook'o lygiuose.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Krovimo tvarkymas

Kai kliento pusėje keičiate kalbą, vertimų užkrovimas gali užtrukti kelias akimirkas, priklausomai nuo vartotojo ryšio. Galite rodyti įkėlimo indikatorių, teikdami vizualinį grįžtamąjį ryšį perjungimo metu ir taip pagerindami vartotojo patirtį.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Daugiskaita

Norint skirtingomis kalbomis teisingai tvarkyti daugiskaitą ir rodyti etiketes pagal skaičių, geriausia praktika yra:

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)}}
		/>
	);
}

Kelios kalbos

Norėdami palaikyti kelias kalbas vienu metu toje pačioje programoje, galite naudoti kelis TacoTranslate tiekėjus su skirtingomis locale reikšmėmis, kaip parodyta žemiau:

Taip pat galite pakeisti locale komponento arba hook lygmenyje.

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>
	);
}

Vertimų ID naudojimas

Galite pridėti id prie Translate komponento, kad būtų galima tvarkyti skirtingus to paties teksto vertimus arba reikšmes. Tai ypač naudinga, kai tas pats tekstas, priklausomai nuo konteksto, turi būti išverstas skirtingai. Priskirdami unikalius ID, užtikrinate, kad kiekvienas to paties teksto atvejis būtų tiksliai išverstas pagal jo konkrečią reikšmę.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Pavyzdžiui, prisijungimas antraštėje gali būti išverstas kaip “Iniciar sesión”, o prisijungimas poraštėje gali būti išverstas kaip “Acceder” ispanų kalba.

Geriausios praktikos