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

Qabaqcıl istifadə

Azerbaijani

Sağdan-sola dillərin idarə edilməsi

TacoTranslate React tətbiqlərinizdə ərəb və ivrit kimi sağdan sola (RTL) yazılan dilləri dəstəkləməyi asanlaşdırır. RTL dillərinin düzgün idarə edilməsi 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>
	);
}

Bundan əlavə, təqdim edilmiş isRightToLeftLocaleCode funksiyasından istifadə edərək cari dili React xaricində 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 ləğv etmək və ya bəzi hissələrin olduğu kimi saxlanmasını təmin etmək üçün üçlü 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əsi lazım olan digər məzmunların 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

Biz 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ənşələrə təşkil etmək üçün faydalıdır.

Originlərdən istifadə haqqında daha ətraflı məlumatı burada oxuya bilərsiniz.

TacoTranslate provayderləri hər hansı bir valideyn provayderinin ayarlarını miras alır, beləliklə digər ayarları təkrar etməyə 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>
	);
}

Mənşə və ya yerli ayarın əvəz edilməsi

Çoxlu TacoTranslate provayderlərindən istifadə etməklə yanaşı, Translate komponenti və useTranslation hook səviyyələrində həm origini, 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ə dilləri dəyişdirərkən, tərcümələrin yüklənməsi istifadəçinin internet bağlantısından asılı olaraq bir neçə saniyə çəkə bilər. Keçid zamanı vizual geribildirim təmin etmək üçü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
	);
}

Çoxluq formaları

Çoxluq formaları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 edilir:

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 vaxtda dəstəkləmək üçün, bir neçə TacoTranslate provayderindən istifadə edə bilərsiniz, aşağıda göstərildiyi kimi müxtəlif locale dəyərləri ilə:

Siz həmçinin locale dəyərini komponent və ya hook səviyyəsində əvəz edə 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ə

Siz 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, 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ə, sətrin hər istifadəsinin onun xüsusi mənasına uyğun şəkildə düzgün 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