Dokumentatsioon: Täpsem kasutamine

Täpsem kasutamine

Estonian

Paremalt vasakule kirjutavate keelte käsitlemine

TacoTranslate muudab teie React-rakendustes paremalt vasakule kirjutavate (RTL) keelte, nagu araabia ja heebrea, toetamise lihtsaks. RTL‑keelte nõuetekohane 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 saate 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õlke keelamine

Kui soovite keelata tõlkimise stringi konkreetsete osade puhul või tagada, et teatud lõigud säiliksid muutmata, võite kasutada kolmekordseid nurksulgusid. See funktsioon on kasulik nimede, tehniliste terminite või muu sellise sisu algkuju 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õlkimata.

Mitmed TacoTranslate'i pakkujad

Soovitame tungivalt kasutada oma rakenduses mitut TacoTranslate pakkujat. See on kasulik oma tõlgete ja tekstistringide korraldamiseks erinevatesse algallikatesse, näiteks päisesse, jalusesse või konkreetsetesse sektsioonidesse.

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

TacoTranslate pakkujad pärivad seadeid igalt vanempakkujalt, nii et te ei pea muid 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>
	);
}

Algallika või lokaali ülekirjutamine

Lisaks mitme TacoTranslate pakkuja kasutamisele saate ka nii originit kui ka locale'i üle kirjutada Translate komponendi ja useTranslation hooki 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 vahetate keelt kliendipoolselt, võib tõlgete laadimine võtta mõne hetke sõltuvalt kasutaja ühendusest. Saate kuvada laadimisindikaatori, et parandada kasutajakogemust, pakkudes vahetuse ajal visuaalset tagasisidet.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Mitmuse vormid

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

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:

Samuti saate locale komponendi või hooki tasemel üle kirjutada.

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 sama teksti erinevaid tõlkeid või tähendusi hallata. See on eriti kasulik, kui sama teksti puhul on konteksti tõttu vaja erinevaid tõlkeid. Omistades unikaalseid ID-sid, tagate, et iga selle teksti 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äise sisselogimislink hispaania keeles olla “Iniciar sesión” ja jaluse sisselogimislink “Acceder”.

Parimad tavad