Dokumentatsioon: Täpsem kasutamine

Täpsem kasutamine

Estonian

Paremalt vasakule kirjutavate keelte käsitlemine

TacoTranslate muudab paremalt vasakule (RTL) kirjutavate keelte, nagu araabia ja heebrea, toetamise teie React-rakendustes lihtsaks. RTL-keelte korrektne 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 teksti teatud osades või tagada, et teatud lõigud säiliksid täpselt nii nagu on, võite kasutada kolmekordseid nurksulge. See funktsioon aitab säilitada nimede, tehniliste terminite või muu sellise sisu algset vormi, 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 teie tõlgete ja stringide organiseerimiseks erinevatesse allikatesse, näiteks päisesse, jalusesse või konkreetsetesse sektsioonidesse.

Saate siit lugeda rohkem originite kasutamise kohta.

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 keelt vahetatakse kliendipoolselt, võib tõlgete laadimine kasutaja ühendusest sõltuvalt võtta mõne hetke. 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 käsitlemine

Mitmuse ja loendipõ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

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

Samuti saate üle kirjutada locale 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. Unikaalsete ID-de määramisega tagate, et iga stringi eksemplar 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 sisselogimise tõlge hispaania keelde olla “Iniciar sesión”, ja jaluse sisselogimise tõlge võib olla “Acceder”.

Parimad tavad