Dokumentatsiya: Ilg'or foydalanish

Kengaytirilgan foydalanish

Uzbek

O‘ngdan chapga yoziladigan tillarni boshqarish

TacoTranslate React ilovalaringizda arab va ibroniy kabi o‘ngdan chapga (RTL) o‘qiladigan tillarni qo‘llab‑quvvatlashni osonlashtiradi. RTL tillarini to‘g‘ri boshqarish mazmuningiz 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 React tashqarisida joriy tilni tekshirish uchun foydalanishingiz mumkin.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Tarjimani o'chirish

Matnning ba'zi qismlarini tarjima qilinishidan to'xtatish yoki ularni aynan shunday saqlashni ta'minlash uchun uchta kvadrat qavsdan foydalanishingiz mumkin. Bu funksiya ism, texnik atama yoki boshqa tarjima qilinmasligi lozim bo'lgan har qanday mazmunning 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 tarjimalaringizni va matnlaringizni sarlavha, pastki qism yoki ma'lum bo'limlar kabi turli manbalarga ajratish uchun foydalidir.

Siz bu yerda originlardan foydalanish haqida ko'proq ma'lumot olishingiz mumkin.

TacoTranslate provayderlari har qanday ota provayderdan sozlamalarni meros qilib oladi, shuning uchun siz boshqa sozlamalarni takrorlashga majbur emassiz.

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 ustiga yozish

Bir nechta TacoTranslate provayderlardan foydalanishga qo'shimcha ravishda, siz Translate komponenti va useTranslation hook darajalarida origin va locale'ni ham ustiga yozib o'zgartirishingiz 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‘zgartirishda, tarjimalarni yuklab olish foydalanuvchining internet ulanishiga qarab bir necha soniya yoki biroz vaqt talab qilishi mumkin. O‘zgartirish jarayonida 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

Turli tillarda ko'plik shakllarini to'g'ri boshqarish va son asosidagi 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 vaqtda qo'llab-quvvatlash uchun, siz turli locale qiymatlari bilan bir nechta TacoTranslate provayderlaridan foydalanishingiz mumkin, quyida ko'rsatilganidek:

Siz shuningdek locale ni komponent yoki hook darajasida o'zgartirishingiz 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 boshqarish imkonini beradi. Bu ayniqsa bir xil matn kontekstga qarab turli tarjimalarni talab qilganda foydalidir. Noyob IDlarni belgilash 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, headerdagi login ispanchada “Iniciar sesión”, footerdagi login esa ispanchada “Acceder” bo‘lishi mumkin.

Eng yaxshi amaliyotlar