Dokumentasie: Gevorderde gebruik

Gevorderde gebruik

Afrikaans

Hantering van regs-na-links-tale

TacoTranslate maak dit maklik om tale wat van regs na links gelees word (RTL), soos Arabies en Hebreeus, in jou React-toepassings te ondersteun. Die korrekte hantering van RTL-tale verseker dat jou inhoud korrek vertoon word vir gebruikers wat van regs 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';
	// ...
}

Uitskakeling van vertaling

Om vertaling vir spesifieke dele van ’n tekenreeks te deaktiveer of om seker te maak dat sekere segmente onveranderd bly, kan jy driedubbele vierkante 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 in die vertaling bly.

Meerdere TacoTranslate-verskaffers

Ons beveel sterk aan om verskeie TacoTranslate aanbieders in jou app te gebruik. Dit is nuttig om jou vertalings en stringe in verskillende oorspronge te organiseer, soos jou koptekst, voetteks of spesifieke afdelings.

Jy kan hier meer lees oor die gebruik van oorspronge.

TacoTranslate verskaffers erf instellings van enige ouerverskaffer, sodat jy nie ander instellings hoef 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 streekinstelling

Benewens die gebruik van verskeie TacoTranslate verskaffers, kan u ook beide origin en locale op die vlakke van die Translate komponent en die useTranslation hook oorskryf.

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 die taal aan die kliëntkant verander, kan dit, afhangend van die gebruiker se verbinding, 'n paar oomblikke neem om vertalings op te haal. U kan 'n laaiaanwyser vertoon om die gebruikerservaring te verbeter deur tydens die oorskakeling visuele terugvoer te gee.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Meervoudsvorming

Om meervoudsvorming te hanteer en telgebaseerde etikette in verskillende tale korrek 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)}}
		/>
	);
}

Meerdere tale

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

Jy kan ook die locale op komponent- of hookvlak 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 vertaling-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 vereis, afhangend van die konteks. Deur unieke ID's toe te ken, verseker jy dat elke voorkoms van die string akkuraat vertaal word volgens die spesifieke betekenis daarvan.

import {Translate} from 'tacotranslate/react';

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

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

Byvoorbeeld, die aanmelding in die koptekst kan na “Iniciar sesión” vertaal word, en die aanmelding in die voettekst kan na “Acceder” vertaal word in Spaans.

Beste praktyke