Dokumentasie: Gevorderde gebruik

Gevorderde gebruik

Afrikaans

Hantering van reg-na-links tale

TacoTranslate maak dit maklik om regter-na-links (RTL) tale, soos Arabies en Hebreeus, in jou React-toepassings te ondersteun. Goeie hantering van RTL-tale verseker dat jou inhoud korrek vertoon word vir gebruikers wat van regter na links lees.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Jy kan ook die verskafde isRightToLeftLocaleCode funksie gebruik om die huidige taal buite React te kontroleer.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Vertaling deaktiveer

Om vertaling vir spesifieke dele van ’n string uit te skakel of om te verseker dat sekere segmente soos dit is behou word, kan jy driedubbel vierkantige hakies gebruik. Hierdie funksie is nuttig om die oorspronklike formaat van name, tegniese terme, of enige ander inhoud wat nie vertaal moet word nie, te behou.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

In hierdie voorbeeld sal die woord “TacoTranslate” onveranderd bly in die vertaling.

Meervoudige TacoTranslate-verskaffers

Ons moedig sterk aan om verskeie TacoTranslate verskaffers in jou app te gebruik. Dit is nuttig vir die organiseer van jou vertalings en stringe in verskillende oorspronge, soos jou kopstuk, voetskrif, of spesifieke afdelinge.

Jy kan hiermeer lees oor die gebruik van oorspronge.

TacoTranslate verskaffers erf instellings van enige ouer-verskaffer, so jy hoef nie enige ander instellings te herhaal nie.

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>
	);
}

Oorskryf oorsprong of locale

Benewens die gebruik van meerdere TacoTranslate verskaffers, kan jy ook beide oorsprong en lokaliteit op die vlakke van die Translate komponent en useTranslation hook oorleef.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Hantering van laai

Wanneer u tale aan die kliëntkant verander, kan dit ’n paar oomblikke neem om vertalings op te haal, afhangende van die gebruiker se verbindingspoed. U kan ’n laaier aandui om die gebruikerservaring te verbeter deur visuele terugvoer tydens die oorskakeling te verskaf.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Meervoudvorming

Om meervoudsvorming te hanteer en telgebaseerde etikette korrek in verskillende tale te vertoon, word dit as beste praktyk beskou:

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)}}
		/>
	);
}

Meertalige tale

Om verskeie tale gelyktydig binne dieselfde toepassing te ondersteun, kan jy meerdere TacoTranslate-verskaffers gebruik met verskillende locale waardes soos hieronder getoon:

Jy kan ook die locale op die komponent- of haakvlak oorskryf.

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>
	);
}

Gebruik van vertaal-ID's

Jy kan ’n id by die Translate komponent voeg om verskillende vertalings of betekenisse vir dieselfde string te hanteer. Dit is veral nuttig wanneer dieselfde teks verskillende vertalings benodig gebaseer op konteks. Deur unieke ID’s toe te ken, verseker jy dat elke instansie van die string akkuraat vertaal word volgens sy spesifieke betekenis.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Byvoorbeeld, kopskrif aanmelding kan vertaal word na “Iniciar sesión”, en voetskrif aanmelding kan vertaal word na “Acceder” in Spaans.

Beste praktyke