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

Qabaqcıl istifadə

Azerbaijani

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

TacoTranslate React tətbiqlərinizdə ərəb və ivrit kimi sağdan sola (RTL) yönümlü 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>
	);
}

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 üç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ə 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əz qalacaq.

Bir neçə TacoTranslate təminatçısı

Tətbiqinizdə bir neçə TacoTranslate provayderindən istifadə etməyi qətiyyətlə tövsiyə edirik. Bu, tərcümələrinizi və mətnləri başlıq, altbilgi və ya xüsusi bölmələr kimi müxtəlif mənşələrə təşkil etmək üçün faydalıdır.

Siz originlərdən istifadə haqqında daha ətraflı məlumatı buradan oxuya bilərsiniz.

TacoTranslate təminatçıları valideyn təminatçının bütün parametrlərini miras alır, ona görə də digər parametrləri təkrar etməyiniz lazım deyil.

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şəyi və ya yerli dili üstələmək

Birdən çox TacoTranslate təminatçısından istifadə etməklə yanaşı, siz həmçinin Translate komponenti və 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ənmənin idarə edilməsi

Klient tərəfində dili dəyişdirərkən, istifadəçinin bağlantısından asılı olaraq tərcümələrin alınması 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əmə 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

Çoxluq formalarını 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)}}
		/>
	);
}

Çoxsaylı dillər

Eyni tətbiq daxilində 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 təminatçısından istifadə edə bilərsiniz:

Həmçinin locale-i 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ə

Siz eyni sətrin fərqli tərcümələrini və ya mənalarını idarə etmək üçün idi Translate komponentinə ə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 bir nüsxə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ı login ispan dilində “Iniciar sesión” kimi, altbilgidəki login isə “Acceder” kimi tərcümə oluna bilər.

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