Dokumentatsioon: Täpsem kasutamine

Täpsem kasutamine

Estonian

Paremalt vasakule kirjutavate keelte käsitlemine

TacoTranslate muudab teie React-rakendustes paremalt vasakule (RTL) kirjutatavate 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 praeguse keele kontrollimiseks väljaspool React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tõlkimise keelamine

Kui soovite keelata stringi konkreetsete osade tõlkimise või tagada, et teatud segmendid säiliksid muutumatuna, saate kasutada kolmekordseid nurksulgusid. See funktsioon on kasulik nimede, tehniliste terminite või muu sellise sisu originaalse vormi 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 organiseerimiseks erinevatesse allikatesse, näiteks päisesse, jalusesse või konkreetsetesse jaotistesse.

Saate lugeda lisateavet päritolude kasutamise kohta siit.

TacoTranslate pakkujad pärivad seaded mis tahes ülemisest pakkujalt, nii et sul ei ole vaja teisi sätteid korduvalt määrata.

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 locale'i ülekirjutamine

Lisaks mitme TacoTranslate pakkuja kasutamisele saate ka üle kirjutada nii päritolu kui ka keele Translate komponendi ja useTranslation hooki 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 kliendipoolsel tasandil võib tõlgete laadimine võtta mõne hetke, sõltuvalt kasutaja ühendusest. Laadimisindikaatori kuvamine aitab 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

Erinevates keeltes mitmuse vormide käsitlemiseks ja loendipõhiste siltide õige kuvamise tagamiseks peetakse järgmist 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 samaaegselt mitut keelt samas rakenduses, saate kasutada mitut TacoTranslate'i pakkujat erinevate locale väärtustega, nagu allpool näidatud:

Samuti saate locale komponendi või hook'i 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 käsitleda sama teksti erinevaid tõlkeid või tähendusi. See on eriti kasulik, kui sama tekst vajab kontekstist sõltuvalt erinevaid tõlkeid. Ainulaadseid ID-sid määrates 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 sisselogimise tõlge hispaania keeles olla “Iniciar sesión”, ja jaluse sisselogimise tõlge võib olla “Acceder”.

Parimad tavad