Hujjatlar: Kengaytirilgan foydalanish

Murakkab foydalanish

Uzbek

O‘ngdan chapga tillarni boshqarish

TacoTranslate sizning React ilovalaringizda arab va ibroniy 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 Reactdan tashqarida tekshirish uchun taqdim etilgan isRightToLeftLocaleCode funksiyasidan foydalanishingiz mumkin.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tarjimani o‘chirish

Matnning ma’lum qismlarini tarjimadan chiqarish yoki ba’zi segmentlarning asl holatida saqlanishini ta’minlash uchun uch marta kvadrat qavslar triple square brackets dan foydalanishingiz mumkin. Bu xususiyat ism, 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‘zgarmay qoladi.

Bir nechta TacoTranslate provayderlari

Biz dasturingizda bir nechta TacoTranslate provayderlaridan foydalanishni qat’iyan tavsiya qilamiz. Bu tarjimalaringiz va satrlaringizni sarlavha, pastki qism yoki maxsus bo‘limlar kabi turli manbalarga tashkil etishda foydalidir.

Siz manbalardan foydalanish haqida bu yerda batafsil o'qishingiz mumkin.

TacoTranslate provayderlari 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 hududni 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 tomonidan tillar o‘zgartirilganda, foydalanuvchining ulanishiga qarab, tarjimalarni olish bir necha soniya davom etishi mumkin. O‘tishni vizual tasdiqlash orqali foydalanuvchi tajribasini yaxshilash uchun yuklanmoqda indikatorini ko‘rsatishingiz mumkin.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Ko‘plik shakllari

Ko‘plikni 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

Bitta ilovada bir vaqtning o‘zida bir nechta tillarni qo‘llab-quvvatlash uchun, quyidagi misolda ko‘rsatilgandek, turli locale qiymatlar bilan bir nechta TacoTranslate provayderlaridan foydalanishingiz 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-larini ishlatish

Siz Translate komponentiga bir xil matn uchun turli tarjimalar yoki ma’nolarni boshqarish uchun id qo’shishingiz mumkin. Bu ayniqsa, bir xil matn kontekstga qarab turli tarjimalarni talab qilganda foydalidir. Unikal IDlar berish orqali har bir matn 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, header login “Iniciar sesión” ga, footer login esa ispan tilida “Acceder” ga tarjima qilinishi mumkin.

Eng yaxshi tajribalar