Hujjatlar: Kengaytirilgan foydalanish

Kengaytirilgan foydalanish

Uzbek

O‘ngdan chapga tillarni boshqarish

TacoTranslate sizning React ilovalaringizda arab va ivrit kabi o‘ngdan chapga (RTL) tillarni qo‘llab-quvvatlashni osonlashtiradi. RTL tillarini to‘g‘ri boshqarish, chapdan o‘ngga 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>
	);
}

Joriy tilni React tashqarisida tekshirish uchun siz taqdim etilgan isRightToLeftLocaleCode funksiyasidan foydalanishingiz mumkin.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tarjimonlikni o‘chirish

Matnning ma'lum qismlarini tarjima qilishni o‘chirish yoki ba’zi segmentlarning o‘z holicha saqlanishini ta’minlash uchun uch tomonlama to‘rtburchak qavslar tripple square brackets dan foydalanishingiz mumkin. Bu funksiya ism, texnik atamalar yoki boshqa tarjima qilinmasligi kerak bo‘lgan kontentning asl formatini saqlab qolishda foydalidir.

import {Translate} from 'tacotranslate/react';

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

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

Bir nechta TacoTranslate provayderlari

Ilovangizda bir nechta TacoTranslate provayderlaridan foydalanishni qat’iy tavsiya qilamiz. Bu tarjimalaringiz va matnlaringizni turli manbalar, masalan, sarlavha, pastki qism yoki maxsus bo‘limlarga ajratib tashkil etishda foydalidir.

Siz manbalarni ishlatish haqida batafsil ma'lumotni bu yerda o'qishingiz mumkin.

TacoTranslate provayderlari har qanday ota-provayderdan sozlamalarni meros qilib oladi, shuning uchun boshqa 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>
	);
}

Manbani yoki mintaqani bekor qilish

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‘zgartirganda, foydalanuvchining bog‘lanishiga qarab tarjimalarni olish bir necha soniya davom etishi mumkin. O‘tish jarayonida vizual xabar berish uchun yuklanish ko‘rsatkichi namoyish qilishingiz mumkin, bu esa foydalanuvchi tajribasini yaxshilaydi.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Ko‘plik shakli berish

Ko‘plik shaklini boshqarish va turli tillarda 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

Bir xil ilovada bir nechta tillarni bir vaqtning o‘zida qo‘llab-quvvatlash uchun, quyida ko‘rsatilganidek, turli locale qiymatlari bilan bir nechta TacoTranslate providerlarini ishlatishingiz mumkin:

Siz shuningdek locale ni komponent yoki hook darajasida 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 bir xil satr uchun turli tarjimalar yoki ma’nolarni boshqarish uchun Translate komponentiga id qo’shishingiz mumkin. Bu ayniqsa, bir xil matn kontekstga qarab turli tarjimalarni talab qilganda foydalidir. Yagona IDlarni tayinlash orqali, siz har bir satr nusxasining o’ziga xos ma’nosiga muvofiq aniq 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, sarlavhadagi login “Iniciar sesión” ga, pastki qismdagi login esa ispan tilida “Acceder” ga tarjima qilinishi mumkin.

Eng yaxshi tajribalar