TacoTranslate
/
DocumentacióPreus
 
  1. Introducció
  2. Començant
  3. Configuració i instal·lació
  4. Utilitzant TacoTranslate
  5. Representació al costat del servidor
  6. Ús avançat
  7. Millors pràctiques
  8. Gestió d'errors i depuració
  9. Idiomes compatibles

Ús avançat

Gestió de llengües d'esquerra a dreta

TacoTranslate facilita el suport a llengües de dreta a esquerra (RTL), com ara l’àrab i l’hebreu, a les teves aplicacions React. Una gestió correcta de les llengües RTL assegura que el teu contingut es mostri adequadament per 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ó per a parts específiques d’una cadena o per assegurar que certs segments es preservin tal qual, podeu utilitzar triple claudàtors. 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ó.

Diversos proveïdors de TacoTranslate

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

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

Els proveïdors de TacoTranslate hereten les configuracions de qualsevol proveïdor pare, per la qual cosa 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>
	);
}

Sustituir l’origen o la configuració regional

A més d'utilitzar diversos proveïdors TacoTranslate, també podeu substituir tant l'origen com la configuració regional en els 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 d’idioma al costat del client, obtenir les traduccions pot trigar uns moments depenent de la connexió de l’usuari. Pots mostrar un indicador de càrrega per millorar l’experiència de l’usuari proporcionant 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 etiquetes basades en el recompte correctament en diferents idiomes, això es considera una millor 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 suportar múltiples idiomes simultàniament dins de la mateixa aplicació, podeu utilitzar diversos proveïdors TacoTranslate amb diferents valors locale com es mostra a continuació:

També pots sobreescriure el locale a nivell de component o 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’IDs de traducció

Pots afegir un id al component Translate per gestionar diferents traduccions o significats d’una mateixa cadena. Això és especialment útil quan el mateix text requereix traduccions diferents segons el context. Assignant identificadors únics, assegures que cada instància de la cadena es tradueixi amb precisió 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, el login de l'encapçalament podria traduir-se com a “Iniciar sesión”, i el login del peu de pàgina podria traduir-se com a “Acceder” en espanyol.

Millors pràctiques

Un producte de NattskiftetFet a Noruega