Dokumentatsiya: Kengaytirilgan foydalanish

Ilg'or foydalanish

Uzbek

O'ngdan chapga yoziladigan tillar bilan ishlash

TacoTranslate sizning React ilovalaringizda arab va ivrit kabi o'ngdan chapga (RTL) yoziluvchi tillarni qo'llab-quvvatlashni osonlashtiradi. RTL tillarini to'g'ri boshqarish mazmuningizni 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 foydalanib, joriy tilni Reactdan tashqarida tekshirishingiz mumkin.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tarjimani o‘chirish

Matnning ma'lum qismlarini tarjima qilmaslik yoki ba'zi segmentlarni o'z holicha saqlashni ta'minlash uchun uchta kvadrat qavsdan foydalanishingiz mumkin. Bu funksiya ism, texnik atamalar yoki tarjima qilinmasligi kerak bo'lgan boshqa har qanday mazmundagi matnlarning asl formatini saqlash uchun foydalidir.

import {Translate} from 'tacotranslate/react';

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

Ushbu 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, masalan, sarlavha, pastki qism yoki muayyan bo'limlar kabi turli manbalarga tashkillashtirish uchun foydalidir.

Siz originlardan foydalanish haqida batafsil ma'lumotni bu yerdan o'qishingiz mumkin.

TacoTranslate provayderlar har qanday ota provayderdan sozlamalarni meros qilib oladi, shuning uchun boshqa sozlamalarni takrorlashga hojat qolmaydi.

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

Origin yoki lokalni o'zgartirish

Bir nechta TacoTranslate provayderlaridan foydalanishdan tashqari, siz Translate komponenti va useTranslation hook darajasida ham manba va lokalni qayta belgilashingiz 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

Klient tomonida tilni o'zgartirganda, foydalanuvchining internet ulanishiga qarab tarjimalarni yuklab olish biroz vaqt olishi mumkin. O'zgartirish paytida foydalanuvchi tajribasini yaxshilash uchun vizual bildirish sifatida yuklanish indikatorini ko'rsatishingiz mumkin.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Ko‘plik

Ko‘plik shakllarini boshqarish va turli tillarda son asosidagi yorliqlarni to‘g‘ri ko‘rsatish 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 ilovada bir nechta tillarni bir vaqtning o'zida qo'llab-quvvatlash uchun turli locale qiymatlarga ega bir nechta TacoTranslate provayderlaridan foydalanishingiz mumkin:

Siz shuningdek localeni komponent yoki hook darajasida ustiga yozishingiz 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

Bir xil satr uchun turli tarjimalar yoki ma'nolarni boshqarish uchun idni Translate komponentiga qo'shishingiz mumkin. Bu ayniqsa bir xil matn kontekstga qarab turlicha tarjima qilinishi kerak bo'lganda foydalidir. Noyob ID'larni belgilash orqali har bir matn nusxasining o'ziga xos ma'nosiga muvofiq ravishda 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 ispanchada “Iniciar sesión”ga, pastki qismdagi login esa “Acceder”ga tarjima qilinishi mumkin.

Eng yaxshi amaliyotlar