Dokumentatsioon: Täpsem kasutamine

Täpsem kasutamine

Estonian

Paremalt vasakule kirjutavate keelte käsitlemine

TacoTranslate muudab lihtsaks paremalt vasakule (RTL) kirjutavate keelte, näiteks araabia ja heebrea, toe lisamise teie React-rakendustesse. Nõuetekohane RTL-keelte käsitlemine tagab, et teie sisu kuvatakse õigesti kasutajatele, kes loevad paremalt vasakule.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Samuti võite kasutada pakutud isRightToLeftLocaleCode funktsiooni, et kontrollida praegust keelt väljaspool React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tõlkimise keelamine

Kui soovite keelata tõlkimise stringi kindlate osade puhul või tagada, et teatud lõigud säilitatakse muutmata, võite kasutada kolmekordseid nurksulgusid. See funktsioon on kasulik nimede, tehniliste terminite või muu sellise sisu algse vormingu säilitamiseks, mida ei tohiks tõlkida.

import {Translate} from 'tacotranslate/react';

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

Selles näites jääb sõna “TacoTranslate” tõlkes muutumatuks.

Mitmed TacoTranslate'i pakkujad

Soovitame tungivalt kasutada teie rakenduses mitut TacoTranslate pakkujat. See on kasulik teie tõlgete ja stringide korraldamiseks erinevatesse päritolukohtadesse, näiteks päisesse, jalusesse või kindlatesse osadesse.

Saate siit lugeda lähemalt, kuidas päritolusid kasutada.

TacoTranslate pakkujad pärivad seadeid igalt vanempakkujalt, nii et sa ei pea teisi seadeid kordama.

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

Päritolu või lokaali ülekirjutamine

Lisaks mitme TacoTranslate pakkuja kasutamisele saate ka nii origin'i kui locale'i üle kirjutada Translate komponendi ja useTranslation hook'i tasemel.

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

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

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

Laadimise käsitlemine

Kui kasutaja kliendipoolselt keelt vahetab, võib tõlgete pärimine sõltuvalt kasutaja ühendusest võtta mõne hetke. Kasutajakogemuse parandamiseks võite vahetuse ajal kuvada laadimisindikaatori, mis annab visuaalset tagasisidet.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Mitmuse käsitlemine

Mitmuse vormide käsitlemiseks ja arvupõhiste siltide korrektseks kuvamiseks erinevates keeltes peetakse seda parimaks tavaks:

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

Mitmed keeled

Et toetada mitut keelt samaaegselt samas rakenduses, saate kasutada mitut TacoTranslate'i pakkujat erinevate locale väärtustega, nagu allpool näidatud:

Saate ka locale üle kirjutada komponendi või hooki tasemel.

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

Tõlke-ID-de kasutamine

Saate lisada id Translate komponendile, et käsitleda sama stringi erinevaid tõlkeid või tähendusi. See on eriti kasulik, kui sama tekst vajab kontekstist lähtuvalt erinevaid tõlkeid. Ainulaadsete ID-de määramisega tagate, et iga sama stringi esinemine tõlgitakse täpselt vastavalt selle konkreetsele tähendusele.

import {Translate} from 'tacotranslate/react';

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

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

Näiteks võib päises olev sisselogimine hispaania keeles tõlkida kui „Iniciar sesión”, ja jaluses olev sisselogimine kui „Acceder”.

Parimad tavad