Dokumentatsiya: Kengaytirilgan foydalanish

Ilg'or foydalanish

Uzbek

Oʻngdan chapga yoziladigan tillar bilan ishlash

TacoTranslate React ilovalaringizda arabcha va ivrit kabi o‘ngdan chapga (RTL) yoziladigan tillarni qo‘llab‑quvvatlashni osonlashtiradi. RTL tillarini to‘g‘ri boshqarish kontentingizni o‘ngdan chapga o‘qiydigan foydalanuvchilar uchun 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>
	);
}

Shuningdek, taqdim etilgan isRightToLeftLocaleCode funksiyasidan Reactdan tashqarida joriy tilni tekshirish uchun foydalanishingiz mumkin.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tarjimani o‘chirish

Satrdagi ma'lum bo'laklarning tarjimasini o'chirish yoki ayrim segmentlarni asl holicha saqlashni ta'minlash uchun uchta kvadrat qavsdan foydalanishingiz mumkin. Ushbu funksiya ismlar, texnik atamalar yoki tarjima qilinmasligi kerak bo'lgan boshqa mazmunlarning asl formatini saqlash uchun foydalidir.

import {Translate} from 'tacotranslate/react';

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

Bu misolda “TacoTranslate” so'zi tarjimada o'zgarmas holda qoladi.

Bir nechta TacoTranslate provayderlari

Ilovangizda bir nechta TacoTranslate provayderlaridan foydalanishni qat'iyan tavsiya qilamiz. Bu tarjimalaringiz va matnlaringizni sarlavha, pastki qism yoki muayyan bo'limlar kabi turli manbalarga tashkil qilishda foydalidir.

Siz originlardan foydalanish haqida ko'proq ma'lumotni bu yerdan 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>
	);
}

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 tilni o'zgartirganda, tarjimalarni olish foydalanuvchining internet ulanishiga qarab bir necha soniya vaqt olishi mumkin. O'zgartirish jarayonida foydalanuvchiga vizual qayta aloqa berish uchun yuklanish indikatorini ko'rsatishingiz mumkin.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Ko'pliklash

Ko'plik shakllarini boshqarish va tillarga qarab songa 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, siz bir nechta TacoTranslate provayderlaridan foydalanishingiz va ular uchun quyida ko'rsatilganidek turli locale qiymatlarni belgilashingiz mumkin:

Siz shuningdek locale komponent yoki hook darajasida qayta belgilashingiz 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 identifikatorlaridan foydalanish

Siz idni Translate komponentiga qo'shishingiz mumkin, bu bir xil matn uchun turli tarjimalar yoki ma'nolarni boshqarishga yordam beradi. Bu ayniqsa bir xil matn kontekstga qarab turli tarjimalarni talab qilganda foydalidir. O'ziga xos IDlarni tayinlash orqali har bir matn nusxasi o'zining aniq ma'nosiga muvofiq ravishda 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 ispan tilida “Iniciar sesión” ga, footer login esa ispan tilida “Acceder” ga tarjima qilinishi mumkin.

Eng yaxshi amaliyotlar