Sənədləşmə: Qabaqcıl istifadə

Qabaqcıl istifadə

Azerbaijani

Sağdan-sola yazılan dillərlə işləmək

TacoTranslate sağdan-sola (RTL) dilləri, məsələn, ərəb və ivrit kimi, React tətbiqlərinizdə dəstəkləməyi asanlaşdırır. RTL dillərinin düzgün idarə olunması məzmununuzun sağdan sola oxuyan istifadəçilər üçün düzgün göstərilməsini təmin edir.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Əlavə olaraq, təmin edilmiş isRightToLeftLocaleCode funksiyasından istifadə edərək cari dili React-dən kənarda yoxlaya bilərsiniz.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tərcüməni deaktiv etmək

Bir mətnin müəyyən hissələrinin tərcüməsini söndürmək və ya müəyyən seqmentlərin olduğu kimi qorunmasını təmin etmək üçün üçqat kvadrat mötərizələrdən istifadə edə bilərsiniz. Bu xüsusiyyət adların, texniki terminlərin və ya tərcümə edilməməli olan digər məzmunun orijinal formatını saxlamaq üçün faydalıdır.

import {Translate} from 'tacotranslate/react';

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

Bu nümunədə “TacoTranslate” sözü tərcümədə dəyişməz qalacaq.

Bir neçə TacoTranslate provayderi

Tətbiqinizdə bir neçə TacoTranslate provayderindən istifadə etməyi qəti şəkildə tövsiyə edirik. Bu, tərcümələrinizi və mətnlərinizi başlıq, altbilgi və ya müəyyən bölmələr kimi fərqli mənşələr üzrə təşkil etmək üçün faydalıdır.

Siz mənşələrdən istifadə barədə daha ətraflı məlumatı burada oxuya bilərsiniz.

TacoTranslate provayderləri hər hansı valideyn provayderdən ayarları miras alır, buna görə digər ayarları təkrarlamağa ehtiyacınız olmayacaq.

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

Origin və lokalı əvəz etmək

Birdən çox TacoTranslate provayderindən istifadə etməklə yanaşı, Translate komponenti və useTranslation hook səviyyələrində həm origin-i, həm də locale-i əvəz edə bilərsiniz.

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

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

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

Yüklənmənin idarə edilməsi

İstifadəçi tərəfində dili dəyişərkən, tərcümələrin yüklənməsi istifadəçinin bağlantısına görə bir neçə saniyə çəkə bilər. Dili dəyişərkən yükləmə göstəricisi göstərərək istifadəçiyə vizual geribildirim verə və istifadəçi təcrübəsini yaxşılaşdıra bilərsiniz.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Çoğullaşdırma

Çoğullaşdırmanı idarə etmək və müxtəlif dillərdə say əsaslı etiketləri düzgün göstərmək üçün bu ən yaxşı təcrübə hesab olunur:

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

Bir neçə dil

Eyni tətbiqdə bir neçə dili eyni zamanda dəstəkləmək üçün, aşağıda göstərildiyi kimi müxtəlif locale dəyərləri ilə bir neçə TacoTranslate provayderindən istifadə edə bilərsiniz:

Həmçinin locale dəyərini komponent və ya hook səviyyəsində dəyişdirə bilərsiniz.

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

Tərcümə ID-lərindən istifadə

Eyni sətir üçün müxtəlif tərcümələri və ya mənaları idarə etmək üçün Translate komponentinə id əlavə edə bilərsiniz. Bu, eyni mətnin kontekstdən asılı olaraq fərqli tərcümələr tələb etdiyi hallarda xüsusilə faydalıdır. Unikal ID-lər təyin etməklə hər bir mətn nümunəsinin onun xüsusi mənasına uyğun olaraq dəqiq tərcümə olunmasını təmin edirsiniz.

import {Translate} from 'tacotranslate/react';

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

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

Məsələn, başlıqdakı giriş ispan dilində “Iniciar sesión”, altbilgidəki giriş isə “Acceder” kimi tərcümə oluna bilər.

Ən yaxşı təcrübələr