Documentație: Utilizare avansată

Utilizare avansată

Romanian

Gestionarea limbilor scrise de la dreapta la stânga

TacoTranslate facilitează suportul pentru limbile scrise de la dreapta la stânga (RTL), cum ar fi araba și ebraica, în aplicațiile tale React. Gestionarea corectă a limbilor RTL asigură afișarea corectă a conținutului pentru utilizatorii care citesc de la dreapta la stânga.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

De asemenea, puteți folosi funcția furnizată isRightToLeftLocaleCode pentru a verifica limba curentă în afara React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Dezactivarea traducerii

Pentru a dezactiva traducerea unor părți ale unui text sau pentru a te asigura că anumite segmente sunt păstrate ca atare, poți folosi paranteze pătrate triple. Această caracteristică este utilă pentru păstrarea formatului original al numelor, termenilor tehnici sau al oricărui alt conținut care nu trebuie tradus.

import {Translate} from 'tacotranslate/react';

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

În acest exemplu, cuvântul “TacoTranslate” va rămâne neschimbat în traducere.

Mai mulți furnizori TacoTranslate

Vă încurajăm insistent să utilizați mai mulți furnizori TacoTranslate în aplicația dvs. Acest lucru este util pentru organizarea traducerilor și a șirurilor de caractere în diferite origini, cum ar fi antetul, subsolul sau secțiuni specifice.

Puteți citiți mai multe despre utilizarea originilor aici.

TacoTranslate furnizorii moștenesc setările de la orice furnizor părinte, astfel încât nu va trebui să repetați nicio altă setare.

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

Suprascrierea originii sau a localizării

Pe lângă utilizarea mai multor TacoTranslate provideri, poți, de asemenea, să suprascrii atât origin, cât și locale la nivelul componentei Translate și al hook-ului useTranslation.

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

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

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

Gestionarea încărcării

Când schimbați limba la nivelul clientului, preluarea traducerilor poate dura câteva momente, în funcție de conexiunea utilizatorului. Puteți afișa un indicator de încărcare pentru a îmbunătăți experiența utilizatorului, oferind feedback vizual în timpul comutării.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizare

Pentru a gestiona pluralizarea și a afișa corect etichetele bazate pe număr în diferite limbi, aceasta este considerată cea mai bună practică:

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

Mai multe limbi

Pentru a suporta simultan mai multe limbi în aceeași aplicație, puteți folosi mai mulți furnizori TacoTranslate cu valori locale diferite, așa cum se arată mai jos:

De asemenea, puteți suprascrie locale la nivel de componentă sau de 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>
	);
}

Folosirea ID-urilor de traducere

Puteți adăuga un id componentei Translate pentru a gestiona traduceri sau înțelesuri diferite pentru același șir. Acest lucru este deosebit de util atunci când același șir necesită traduceri diferite în funcție de context. Atribuind ID-uri unice, vă asigurați că fiecare instanță a șirului este tradusă corect în funcție de înțelesul său specific.

import {Translate} from 'tacotranslate/react';

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

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

De exemplu, butonul de autentificare din antet ar putea fi tradus ca “Iniciar sesión”, iar butonul de autentificare din subsol ar putea fi tradus ca “Acceder” în spaniolă.

Cele mai bune practici