Hujjatlar: Kengaytirilgan foydalanish

Murakkab foydalanish

Uzbek

O'ngdan chapga tillarni boshqarish

TacoTranslate React ilovalaringizda arab va ivrit kabi oʻngdan chapga (RTL) tillarni qoʻllab-quvvatlashni osonlashtiradi. RTL tillarini to‘g‘ri boshqarish, oʻngdan chapga oʻqiydigan foydalanuvchilar uchun mazmuningiz to‘g‘ri koʻrsatilishini taʼminlaydi.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Siz shuningdek joriy tilni React tashqarisida tekshirish uchun taqdim etilgan isRightToLeftLocaleCode funksiyasidan foydalanishingiz mumkin.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tarjimani o‘chirib qo‘yish

Matnning ma'lum qismlarini tarjimadan o'chirish yoki ba'zi segmentlarning asl holatda saqlanishini ta'minlash uchun uchlik qavslardan triple square brackets foydalanishingiz mumkin. Ushbu funksiya nomlar, texnik atamalar yoki tarjima qilinmasligi kerak bo'lgan boshqa har qanday kontentning asl formatini saqlashda foydalidir.

import {Translate} from 'tacotranslate/react';

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

Ushbu misolda, “TacoTranslate” soʻzi tarjimada oʻzgarmasdan qoladi.

Bir nechta TacoTranslate provayderlari

Ilovangizda bir nechta TacoTranslate provayderlaridan foydalanishni qat’iyan tavsiya qilamiz. Bu tarjimalaringiz va satrlaringizni sarlavha, pastki qism yoki alohida bo‘limlar kabi turli manbalarga ajratishda foydalidir.

Siz manbalarni qanday ishlatish haqida ko'proq ma'lumotni bu yerda o'qishingiz mumkin.

TacoTranslate provayderlari har qanday ota-ona provayderidan sozlamalarni meros qilib oladi, shuning uchun boshqa hech qanday sozlamalarni takrorlash shart emas.

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

Manba yoki lokalni ustun qo'yish

Bir nechta TacoTranslate provayderlaridan foydalanishga qo'shimcha ravishda, siz Translate komponenti va useTranslation hook darajalarida ham origin va locale ni bekor qilishingiz mumkin.

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

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

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

Yuklanishni boshqarish

Mijoz tomonida tillarni o‘zgartirishda, foydalanuvchining ulanishiga qarab, tarjimalarni olish uchun bir oz vaqt ketishi mumkin. O‘zgartirish jarayonida foydalanuvchi tajribasini yaxshilash uchun yuklanish indikatorini ko‘rsatishingiz mumkin.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Ko‘plik shakllari

Bir nechta tillarda ko‘plik shakllarini to‘g‘ri boshqarish va hisobga asoslangan yorliqlarni to‘g‘ri ko‘rsatish uchun, bu eng yaxshi amaliyot hisoblanadi:

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 nechta tillar

Bitta ilovada bir nechta tillarni bir vaqtda qoʻllab-quvvatlash uchun, siz bir nechta TacoTranslate provayderlaridan turli locale qiymatlari bilan quyidagicha foydalanishingiz mumkin:

Siz shuningdek localeni komponent yoki hook darajasida ham bekor qilishingiz mumkin.

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

Tarjima ID-laridan foydalanish

Siz Translate komponеntiga turli tarjimalar yoki bir xil matnning turli ma’nolarini boshqarish uchun id qo‘shishingiz mumkin. Bu ayniqsa, bir xil matn kontekstga qarab turli tarjimalarni talab qilganda juda foydalidir. Yagona ID larni belgilab, siz matnning har bir nusxasining aniq ma’nosiga muvofiq to‘g‘ri tarjima qilinishini ta’minlaysiz.

import {Translate} from 'tacotranslate/react';

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

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

Masalan, header login „Iniciar sesión“ ga, footer login esa ispan tilida „Acceder“ ga tarjima qilinishi mumkin.

Eng yaxshi amaliyotlar