Құжаттама: Кеңейтілген пайдалану

Кеңейтілген пайдалану

Kazakh

Оңнан солға жазылатын тілдерді өңдеу

TacoTranslate сіздің React қолданбаларыңызда арабша мен иврит сияқты оңнан солға жазылатын (RTL) тілдерді қолдауды жеңілдетеді. RTL тілдерін дұрыс өңдеу сіздің мазмұныңыздың оңнан солға қарай оқитын пайдаланушылар үшін дұрыс көрсетілуін қамтамасыз етеді.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Сондай-ақ берілген isRightToLeftLocaleCode функциясын React сыртында ағымдағы тілді тексеру үшін пайдалана аласыз.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Аударманы өшіру

Жол мәтінінің белгілі бір бөліктерін аударудан өшіру немесе кейбір сегменттердің дәл сол қалпында сақталуын қамтамасыз ету үшін үштік шаршы жақшаларды қолдануға болады. Бұл мүмкіндік атаулардың, техникалық терминдердің немесе аударылмауы тиіс кез келген басқа мазмұнның түпнұсқа форматында сақталуына пайдалы.

import {Translate} from 'tacotranslate/react';

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

Осы мысалда «TacoTranslate» сөзі аудармада өзгеріссіз қалады.

Бірнеше TacoTranslate провайдерлері

Біз қосымшаңызда бірнеше TacoTranslate провайдерін пайдалануды қатты ұсынамыз. Бұл аудармалар мен жолдарды (strings) хедерде, футерде немесе белгілі бір бөлімдер сияқты әртүрлі шығу орындары бойынша ұйымдастыруға пайдалы.

Сіз origins-ты пайдалану туралы толығырақ осы жерден оқи аласыз.

TacoTranslate провайдерлер кез келген ата-аналық провайдерден баптауларды мұра етеді, сондықтан басқа баптауларды қайталаудың қажеті жоқ.

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

Шығу орнын немесе локальды басып жазу

Бірнеше TacoTranslate провайдерін қолданумен қатар, сіз сондай-ақ Translate компоненті мен useTranslation hook деңгейлерінде origin пен locale екеуін де қайта жаза аласыз.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Жүктеуді басқару

Клиент жағында тілді өзгерткенде, аудармаларды алу пайдаланушының интернет қосылымына байланысты біраз уақыт алуы мүмкін. Тілді ауыстыру кезінде визуалды кері байланыс көрсету арқылы пайдаланушы тәжірибесін жақсарту үшін жүктелу индикаторын көрсетіңіз.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Көпше түрлендіру

Көпше формаларды ескере отырып, санға тәуелді жапсырмаларды әртүрлі тілдерде дұрыс көрсету үшін бұл үздік тәжірибе саналады:

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

Бірнеше тіл

Бір қосымшада бірнеше тілді бір уақытта қолдау үшін, төменде көрсетілгендей әр түрлі locale мәндері бар бірнеше TacoTranslate провайдерін пайдалануға болады:

Сондай-ақ сіз locale мәнін компонент немесе hook деңгейінде қайта анықтай аласыз.

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

Аударма идентификаторларын пайдалану

Сіз бірдей жолдың әртүрлі аудармалары мен мағыналарын өңдеу үшін Translate компонентіне id қоса аласыз. Бұл бірдей мәтін контекстке байланысты әртүрлі аудармаларды талап ететін кезде әсіресе пайдалы. Бірегей идентификаторлар тағайындай отырып, жолдың әрбір данасының нақты мағынасына сәйкес дәл аударылуын қамтамасыз етесіз.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Мысалы, жоғарғы бөлімдегі логин испан тілінде “Iniciar sesión” деп, ал төменгі бөлімдегі логин “Acceder” деп аударылуы мүмкін.

Үздік тәжірибелер