Sənədləşmə: Təkmil istifadə

Təkmil istifadə

Azerbaijani

Sağdan sola 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ı, sağdan sola oxuyan istifadəçilər üçün məzmununuzun düzgün şəkildə 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>
	);
}

Cari dili React xaricində yoxlamaq üçün təmin edilmiş isRightToLeftLocaleCode funksiyasından da istifadə edə 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 seqmentlərin olduğu kimi saxlanması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ə olunmaması lazım olan digər məzmunun orijinal formasının qorunması üçü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əkdir.

Çoxsaylı TacoTranslate provayderləri

Tətbiqinizdə bir neçə TacoTranslate təminatçısından istifadə etməyi qəti tövsiyə edirik. Bu, tərcümələrinizi və sətirlərinizi başlıq, altbilgi və ya xüsusi bölmələr kimi müxtəlif mənbələrə təşkil etmək üçün faydalıdır.

Siz mənşələrin istifadəsi haqqında burada daha çox oxuya bilərsiniz.

TacoTranslate təminatçıları hər hansı valideyn təminatçısından ayarları miras alır, beləliklə digər ayarları təkrarlamağa ehtiyac qalmı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>
	);
}

Origin və ya lokalın üstünlüyünün təyin edilməsi

Bir neçə TacoTranslate təminatçısından istifadə etməklə yanaşı, həmçinin Translate komponenti, həm də useTranslation hook səviyyələrində həm origin, həm də locale parametrlərini ə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əmənin idarə olunması

Müştəri tərəfdə dil dəyişərkən, tərcümələrin alınması istifadəçinin əlaqəsindən asılı olaraq bir neçə saniyə çəkə bilər. Keçid zamanı vizual rəy göstərərək istifadəçi təcrübəsini yaxşılaşdırmaq üçün yüklənmə göstəricisini əks etdirə bilərsiniz.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Çoxluq şəkli

Çoxluq formasını idarə etmək və say əsasında 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)}}
		/>
	);
}

Çoxsaylı dillər

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

Siz həmçinin locale 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ə etmək

Eyni mətn üçün fərqli tərcümələri və ya məna fərqlərini idarə etmək üçün Translate komponentinə id əlavə edə bilərsiniz. Bu, xüsusilə eyni mətin kontekstdən asılı olaraq fərqli tərcümələr tələb etdikdə faydalıdır. Unikal ID-lər təyin etməklə, mətnin hər bir nümunəsinin xüsusi mənasına uyğun olaraq dəqiq tərcümə olunduğuna zəmanət verirsiniz.

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, header login İspan dilində “Iniciar sesión”, footer login isə “Acceder” kimi tərcümə oluna bilər.

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