Dokumentatsioon: Täiustatud kasutus

Edasijõudnud kasutus

Estonian

Parempidi vasakule keeltes käsitlemine

TacoTranslate muudab lihtsaks paremale-vasakule (RTL) kirjutavate keelte, nagu araabia ja heebrea, toe teie Reacti rakendustes. 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>
	);
}

Saate kasutada ka antud 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 konkreetsete stringi osade jaoks või selleks, et teatud segmendid jääksid muutumatuks, saate kasutada kolmekordseid nurksulgusid. See funktsioon on kasulik nimede, tehniliste terminite või muu 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 teenusepakkujad

Soovitame tungivalt kasutada oma rakenduses mitut TacoTranslate pakkujat. See on kasulik tõlgete ja tekstide organiseerimiseks erinevatesse algallikatesse, nagu näiteks päis, jalus või konkreetsed sektsioonid.

Saate siit lugeda rohkem allikate kasutamise kohta.

TacoTranslate pakkujad pärivad seaded kõigilt vanematelt pakkujatelt, nii et sul ei ole vaja korduvate seadistustega tegeleda.

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 lokaadi ülekirjutamine

Lisaks mitme TacoTranslate pakkuja kasutamisele saate ka ülekirjutada nii algallika kui ka keele 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 muutmisel kliendi poolel võib tõlgete toomine võtta paar hetke, sõltuvalt kasutaja ühendusest. Saate kuvada laadimisindikaatori, et parandada kasutuskogemust, pakkudes visuaalset tagasisidet keelevahetuse ajal.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Mitmusvormid

Mitmuse käitlemiseks 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

Mitme keele samaaegseks toetamiseks samas rakenduses saate kasutada mitut TacoTranslate 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 nõuab kontekstipõhist erinevat tõlget. Ainulaadsete 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 sisselogimine tõlkida hispaania keeles kui „Iniciar sesión“ ja jaluse sisselogimine kui „Acceder“.

Parimad tavad