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

Qabaqcıl istifadə

Azerbaijani

Sağdan sola yazılan dillərin idarə edilməsi

TacoTranslate React tətbiqlərinizdə ərəb və ivrit kimi sağdan sola (RTL) oxunan dilləri 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>
	);
}

Siz həmçinin təmin edilmiş isRightToLeftLocaleCode funksiyasından istifadə edərək React xaricində cari dili 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 sətirin müəyyən hissələrinin tərcüməsini söndürmək və ya bəzi parçaların olduğu kimi qalması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ə olunmamalı digər məzmunun orijinal formatını qorumaq üçü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əyəcək.

Birdən çox TacoTranslate provayderi

Tətbiqinizdə bir neçə TacoTranslate provayderindən istifadə etməyi şiddətlə 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 müxtəlif mənbələrə təşkil etmək üçün faydalıdır.

Siz originlərdən istifadə haqqında daha çox məlumatı buradan 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

Müştəri tərəfində dili dəyişərkən, tərcümələrin yüklənməsi istifadəçinin bağlantısından asılı olaraq bir neçə saniyə çəkə bilər. Dəyişiklik zamanı vizual geribildirim verərək istifadəçi təcrübəsini yaxşılaşdırmaq üçün yüklənmə göstəricisi göstərə bilərsiniz.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Çoğullaşdırma

Çoxluq formalarını idarə etmək və say əsaslı etiketləri müxtəlif dillərdə 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)}}
		/>
	);
}

Çoxlu dillər

Eyni tətbiqdə bir neçə dili eyni anda dəstəkləmək üçün aşağıda göstərildiyi kimi müxtəlif locale dəyərlərinə malik 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ətrin müxtəlif tərcümələrini və ya mənalarını idarə etmək üçün Translate komponentinə id əlavə edə bilərsiniz. Bu, xüsusilə eyni mətnin kontekstdən asılı olaraq müxtəlif tərcümələrə ehtiyacı olduqda faydalıdır. Unikal ID-lər təyin etməklə, mətnin hər bir nümunəsinin onun xüsusi mənasına uyğun olaraq dəqiq tərcümə olunduğundan əmin olursunuz.

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”, altbilgədəki giriş isə “Acceder” kimi tərcümə oluna bilər.

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