დოკუმენტაცია: მოწინავე გამოყენება

გაფართოებული გამოყენება

Georgian

მარჯვენიდან მარცხნივ ენებთან მუშაობა

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 პროვაიდერი. ეს დახმარებას გაგიწევთ თარგმანების და სტრინგების ორგანიზებაში სხვადასხვა ორიგინებში — მაგალითად ჰედერში, ფუტერში ან კონკრეტულ განყოფილებებში.

შეგიძლიათ ორიგინების გამოყენების შესახებ მეტი ინფორმაცია აქ წაიკითხოთ.

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-ის დონეზე.

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

მრავალენოვანი

იმავე აპლიკაციაში ერთდროულად რამდენიმე ენის მხარდაჭერისთვის, შეგიძლიათ გამოიყენოთ რამდენიმე TacoTranslate პროვაიდერი სხვადასხვა locale მნიშვნელობებით, როგორც ქვემოთ არის ნაჩვენები:

თქვენ ასევე შეგიძლიათ გადაწეროთ 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>
	);
}

თარგმნის ID-ების გამოყენება

შეგიძლიათ დაუმატოთ id 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” ესპანურად.

საუკეთესო პრაქტიკები