Documentació: Ús avançat

Ús avançat

Catalan

Gestió de llengües amb escriptura de dreta a esquerra

TacoTranslate facilita la compatibilitat amb idiomes que s'escriuen de dreta a esquerra (RTL), com l'àrab i l'hebreu, a les teves aplicacions React. El tractament adequat d'aquests idiomes assegura que el teu contingut es mostri correctament als usuaris que llegeixen de dreta a esquerra.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

També podeu utilitzar la funció proporcionada isRightToLeftLocaleCode per comprovar l'idioma actual fora de React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Desactivar la traducció

Per desactivar la traducció de parts concretes d'una cadena o per assegurar que certs segments es conservin tal qual, podeu utilitzar corxets quadrats triples. Aquesta funció és útil per mantenir el format original de noms, termes tècnics o qualsevol altre contingut que no s'hauria de traduir.

import {Translate} from 'tacotranslate/react';

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

En aquest exemple, la paraula “TacoTranslate” romandrà sense canvis en la traducció.

Múltiples proveïdors de TacoTranslate

Us recomanem fermament que utilitzeu diversos proveïdors TacoTranslate a la vostra aplicació. Això és útil per organitzar les vostres traduccions i cadenes en diferents orígens, com ara la capçalera, el peu de pàgina o seccions específiques.

Pots llegir més sobre com utilitzar els orígens aquí.

Els proveïdors de TacoTranslate hereten la configuració de qualsevol proveïdor pare, així que no hauràs de repetir cap altra configuració.

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

Sobrescriure l'origen o la configuració regional

A més d'utilitzar diversos proveïdors TacoTranslate, també podeu sobrescriure tant l'origen com el locale als nivells del component Translate i del hook useTranslation.

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

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

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

Gestió de la càrrega

En canviar l'idioma al client, la recuperació de les traduccions pot trigar uns instants segons la connexió de l'usuari. Pots mostrar un indicador de càrrega per millorar l'experiència de l'usuari oferint retroacció visual durant el canvi.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralització

Per gestionar la pluralització i mostrar correctament les etiquetes segons el recompte en diferents idiomes, això es considera una bona pràctica:

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

Diversos idiomes

Per donar suport a múltiples idiomes simultàniament dins de la mateixa aplicació, pots utilitzar diversos proveïdors de TacoTranslate amb valors locale diferents com es mostra a continuació:

També podeu sobreescriure el locale al nivell del component o del hook.

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

Ús d'identificadors de traducció

Pots afegir un id al component Translate per gestionar diferents traduccions o significats d'una mateixa cadena. Això és especialment útil quan un mateix text requereix traduccions diferents segons el context. En assignar identificadors únics, t'assegures que cada instància de la cadena es tradueix de manera precisa segons el seu significat específic.

import {Translate} from 'tacotranslate/react';

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

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

Per exemple, l'inici de sessió de l'encapçalament podria traduir-se com a “Iniciar sesión”, i l'inici de sessió del peu de pàgina podria traduir-se com a “Acceder” en castellà.

Bones pràctiques