Dokumentatsioon: Täpsem kasutamine

Täpsem kasutamine

Estonian

Parempoolsest vasakule keelte käsitlemine

TacoTranslate teeb lihtsaks parempoolsest vasakule (RTL) lugemisega keelte, nagu araabia ja heebrea, toe sinu React rakendustes. Õige käsitsemine RTL keeltes tagab, et sinu 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

Tõlke keelamiseks stringi konkreetsete osade jaoks või selleks, et teatud segmentide säilitamine toimuks muutumatult, saate 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 oma rakenduses mitut TacoTranslate pakkujat. See on kasulik tõlgete ja stringide korraldamiseks erinevatesse allikatesse, näiteks päisesse, jalusesse või konkreetsetesse sektsioonidesse.

Saate siit lugeda rohkem päritolu kasutamisest.

TacoTranslate pakkujad pärivad seaded mis tahes vanempakkujalt, nii et sul ei ole vaja muid seadeid korrata.

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ärandi või lokaadi ülekirjutamine

Lisaks mitme TacoTranslate pakkuja kasutamisele saate ka ülekirjutada nii origini kui ka lokaali Translate komponendi ja useTranslation konksu tasandil.

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

Keele vahetamisel kliendi poolel võib tõlgete laadimine võtta mõned hetked, sõltuvalt kasutaja ühendusest. Saate kuvada laadimisindikaatori, et parandada kasutajakogemust, pakkudes ülekanne ajal visuaalset tagasisidet.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Mitmusvorming

Mitme arvuliste vormide käsitlemiseks ja arvupõhiste siltide korrektseks kuvamiseks erinevates keeltes peetakse 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

Sama rakenduse sees mitme keele samaaegseks toetamiseks saate kasutada mitut TacoTranslate pakkujat erinevate locale väärtustega, nagu allpool näidatud:

Saate samuti ülekirjutada locale komponendi või hooki tasandil.

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 nõuab konteksti põhjal erinevaid tõlkeid. Unikaalsete ID-de määramise läbi tagate, et iga stringi eksemplar tõlgitakse õigesti vastavalt selle spetsiifilisele 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 sisselogimine tõlkida hispaania keeles kui „Iniciar sesión” ja jaluse sisselogimine kui „Acceder”.

Parimad tavad