Dokumentacioni: Përdorim i avancuar

Përdorim i avancuar

Albanian

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

TacoTranslate e bën të lehtë mbështetjen e gjuhëve me drejtim 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 ofruar isRightToLeftLocaleCode për të kontrolluar gjuhën aktuale jashtë React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Çaktivizimi i përkthimit

Për të çaktivizuar përkthimin për pjesë të caktuara të një vargu ose për të siguruar që segmentet e caktuara 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 rekomandojmë fuqishëm 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, në fund, ose në seksione të veçanta.

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

Ofruesit e TacoTranslate trashëgojnë cilësimet nga çdo ofrues prindor, kështu që nuk do t'ju duhet të përsërisni cilësimet e tjera.

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 e lokalit

Përveç përdorimit të disa ofruesve TacoTranslate, mund të mbishkruani edhe origjinën dhe lokalin në nivelin e komponentit Translate dhe të 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 nga ana e klientit, ngarkimi i përkthimeve mund të zgjasë disa çaste, në varësi të lidhjes së përdoruesit. Mund të shfaqni një tregues ngarkimi për të përmirësuar përvojën e përdoruesit duke dhënë një sinjal vizual gjatë ndërrimit.

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 në të njëjtin aplikacion, mund të përdorni shumë ofrues TacoTranslate me vlera të ndryshme locale siç tregohet më poshtë:

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 te komponenti Translate për të trajtuar përkthime ose kuptime të ndryshme për të njëjtin tekst. 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 tekstit 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, hyrja në header mund të përkthehet në spanjisht si “Iniciar sesión”, dhe hyrja në footer mund të përkthehet si “Acceder”.

Praktikat më të mira