TacoTranslate
/
DokumentatsioonHinnakiri
 
  1. Sissejuhatus
  2. Alustamine
  3. Seadistamine ja konfiguratsioon
  4. TacoTranslate’i kasutamine
  5. Serveripoolne renderdamine
  6. Täiustatud kasutus
  7. Parimad tavad
  8. Veahaldus ja silumine
  9. Toetatud keeled

Täiustatud kasutus

Parempidiste keelte käsitlemine

TacoTranslate muudab parempoolselt vasakule (RTL) keelte, nagu araabia ja heebrea, toetamise teie Reacti rakendustes lihtsaks. Õige RTL keeltele sobiv käitlemine 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 stringi teatud osade jaoks või teatud segmentide säilitamiseks muutumatuna võite kasutada kolmiknurksulgusid. 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 pakkujad

Soovitame tungivalt kasutada oma rakenduses mitut TacoTranslate pakkujat. See on kasulik teie tõlgete ja stringide organiseerimiseks erinevatesse algallikatesse, näiteks päisesse, jalusesse või konkreetsetesse sektsioonidesse.

Saate siit lugeda rohkem päritolude kasutamisest.

TacoTranslate pakkujad pärivad seaded kõigilt vanemapakkujatelt, seega ei pea te 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>
	);
}

Pärandi või keele kohaletoimetamine

Lisaks mitme TacoTranslate pakkuja kasutamisele saate ka Translate komponendi ja useTranslation hooki tasandil üle kirjutada nii origini kui ka lokaadi.

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 kliendipoolsel küljel võib tõlgete laadimine võtta sõltuvalt kasutaja ühendusest mõne 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

Mitmekohalise ja arvestuspõhiste siltide korrektseks kuvamiseks 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)}}
		/>
	);
}

Mitu keelt

Mitme keele samaaegseks toetamiseks samas rakenduses saate kasutada mitut TacoTranslate pakkujat erinevate locale väärtustega nagu allpool näidatud:

Saate samuti üle kirjutada locale komponendi või hook'i 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 vajab kontekstist sõltuvalt erinevaid tõlkeid. 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

Toode ettevõttelt NattskiftetValmistatud Norras