Dokumentacioni: Përdorime të avancuara

Përdorim i avancuar

Albanian

Trajtimi i gjuhëve që shkruhen nga e djathta në të majtë

TacoTranslate e bën të lehtë mbështetjen e gjuhëve që shkruhen nga e djathta në të majtë (RTL), si arabishtja dhe hebraishtja, në aplikacionet tuaja React. Trajtimi i duhur i gjuhëve RTL siguron që përmbajtja juaj të shfaqet saktë për përdoruesit që lexojnë nga e djathta në të majtë.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Ju gjithashtu mund të përdorni funksionin e dhënë isRightToLeftLocaleCode për të kontrolluar gjuhën aktuale jashtë React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Deaktivizimi i përkthimit

Për të çaktivizuar përkthimin për pjesë të caktuara të një vargu ose për të siguruar që disa segmente të ruhen ashtu si janë, mund të përdorni kllapa katrore të trefishta. Kjo veçori është e dobishme për të ruajtur formatin origjinal të emrave, termave teknikë ose çdo përmbajtjeje tjetër që nuk duhet të përkthehet.

import {Translate} from 'tacotranslate/react';

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

Në këtë shembull, fjala “TacoTranslate” do të mbetet e pandryshuar në përkthim.

Ofrues të shumtë të TacoTranslate

Ne ju inkurajmë fuqimisht të përdorni disa ofrues TacoTranslate në aplikacionin tuaj. Kjo është e dobishme për të organizuar përkthimet dhe vargjet tuaja në origjina të ndryshme, si p.sh. në krye të faqes (header), në fund të faqes (footer) ose në seksione specifike.

Mund të lexoni më shumë rreth përdorimit të origjinave këtu.

Ofertuesit e TacoTranslate trashëgojnë cilësimet nga çdo ofrues prind, kështu që nuk do të keni nevojë të përsëritni asnjë cilësim tjetër.

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

Mbivendosja e origjinës ose gjuhës së rajonit (locale)

Përveç përdorimit të shumë ofruesve TacoTranslate, ju gjithashtu mund të anashkaloni origjinën dhe lokalizimin në nivelet e komponentit Translate dhe hook-ut useTranslation.

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

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

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

Menaxhimi i ngarkimit

Kur ndryshoni gjuhën në anën e klientit, marrja e përkthimeve mund të marrë disa momente, varësisht nga lidhja e përdoruesit. Mund të shfaqni një indikator ngarkimi për të përmirësuar përvojën e përdoruesit duke ofruar reagim vizual gjatë ndryshimit.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralizimi

Për të trajtuar pluralizimin dhe për të shfaqur saktë etiketat e bazuara në numër në gjuhë të ndryshme, kjo konsiderohet praktikë më e mirë:

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

Gjuhë të shumta

Për të mbështetur shumë gjuhë njëkohësisht brenda të njëjtit aplikacion, mund të përdorni disa ofrues TacoTranslate me vlera të ndryshme locale siç tregohet më poshtë:

Ju gjithashtu mund të mbivendosni locale në nivelin e komponentit ose të hook-ut.

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

Përdorimi i ID-ve të përkthimit

Mund të shtoni një id në komponentin Translate për të trajtuar përkthime ose kuptime të ndryshme për të njëjtin varg. Kjo është veçanërisht e dobishme kur i njëjti tekst kërkon përkthime të ndryshme në varësi të kontekstit. Duke caktuar ID-të unike, siguroheni që çdo rast i vargut të përkthehet saktë sipas kuptimit të tij specifik.

import {Translate} from 'tacotranslate/react';

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

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

Për shembull, login-i në header mund të përkthehet si “Iniciar sesión”, dhe login-i në footer mund të përkthehet si “Acceder” në spanjisht.

Praktikat më të mira