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

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

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 провайдерін пайдалануды қатты ұсынамыз. Бұл аудармаларыңыз бен мәтін жолдарыңызды бас тақырып, төменгі колонтитул немесе нақты бөлімдер сияқты әртүрлі қайнарларға (origin) ұйымдастыруға пайдалы.

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

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» деп аударылуы мүмкін.

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