Dokumentatsioon: Täpsem kasutamine

Täpsem kasutus

Estonian

Parempoolsete keeltes toimetamine

TacoTranslate teeb teie Reacti rakendustes lihtsaks parempoolsest vasakule (RTL) suunaga keeltes, näiteks araabia ja heebrea keeles, toe pakkumise. Õige 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 saate kasutada pakutud funktsiooni isRightToLeftLocaleCode, et kontrollida praegust keelt väljaspool React-i.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tõlke keelamine

Tõlke keelamiseks stringi teatud osade jaoks või selleks, et teatud segmendid jääksid originaalilähedased, võite 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.

Mitu TacoTranslate pakkujat

Soovitame tungivalt kasutada oma rakenduses mitut TacoTranslate pakkujat. See on kasulik tõlgete ja tekstide organiseerimiseks erinevate päritolukohtade kaupa, näiteks päises, jaluses või kindlates jaotistes.

Saate siit lugeda rohkem päritolude kasutamise kohta.

TacoTranslate pakkujad pärivad seadistused mis tahes vanemalt pakkujalt, seega ei pea te muid seadistusi 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ärandi päritolu või lokaal üle kirjutamine

Lisaks mitme TacoTranslate pakkuja kasutamisele saate ka Translate komponendi ja useTranslation hooki tasandil üle kirjutada nii päritolu kui ka lokaliseerimise.

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 sõltuvalt kasutaja ühendusest võtta paar hetke. Saate kuvada laadimisindikaatori, et parandada kasutajakogemust, pakkudes visuaalset tagasisidet vahetuse ajal.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Mitmusvormid

Mitme arvulisuse käsitlemiseks ja loendipõhiste siltide õige kuvamise tagamiseks erinevates keeltes peetakse seda heaks 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 ühes rakenduses saate kasutada mitut TacoTranslate pakkujat erinevate locale väärtustega, nagu allpool näidatud:

Saate ka ülekirjutada 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 sõltuvalt erinevaid tõlkeid. Atribuutides unikaalsed ID-d 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