Documentație: Utilizare avansată

Utilizare avansată

Romanian

Gestionarea limbilor scrise de la dreapta la stânga

TacoTranslate facilitează suportul pentru limbile care se scriu 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 utiliza 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 anumitor părți ale unui șir sau pentru a asigura că anumite segmente sunt păstrate așa cum sunt, puteți folosi triple paranteze drepte. Această funcționalitate este utilă pentru menținerea formatului original al numelor, termenilor tehnici sau a 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

Încurajăm cu tărie utilizarea mai multor furnizori TacoTranslate în aplicația dumneavoastră. Acest lucru este util pentru organizarea traducerilor și șirurilor de caractere în diferite origini, cum ar fi antetul, subsolul sau secțiuni specifice.

Poți citi mai multe despre utilizarea originilor aici.

Furnizorii TacoTranslate moștenesc setările de la orice furnizor părinte, astfel încât nu va trebui să repeți alte setări.

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 furnizori TacoTranslate, puteți, de asemenea, să suprascrieți atât originea, cât și localizarea la nivelurile componentei Translate și 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 pe partea 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 un feedback vizual în timpul schimbă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ă o practică recomandată:

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 mai multe limbi simultan în aceeași aplicație, puteți utiliza mai mulți furnizori TacoTranslate cu valori diferite pentru locale așa cum este prezentat mai jos:

De asemenea, puteți suprascrie locale la nivelul componentelor sau hook-urilor.

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

Utilizarea ID-urilor de traducere

Poți adăuga un id componentului Translate pentru a gestiona traduceri sau sensuri diferite pentru același șir. Acest lucru este deosebit de util atunci când același text necesită traduceri diferite în funcție de context. Prin atribuirea unor ID-uri unice, te asiguri că fiecare instanță a șirului este tradusă corect conform înțelesului 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, autentificarea din antet ar putea fi tradusă ca „Iniciar sesión”, iar autentificarea din subsol ar putea fi tradusă ca „Acceder” în spaniolă.

Cele mai bune practici