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

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

Georgian

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

TacoTranslate აადვილებს მარჯვენიდან მარცხნივ (RTL) ენების, როგორიცაა არაბული და ებრაული, მხარდაჭერას თქვენს React აპლიკაციებში. 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 მომწოდებლის გამოყენების გარდა, თქვენ ასევე შეგიძლიათ გადააწეროთ როგორც origin, ისე locale Translate კომპონენტის და useTranslation ჰუკის დონეებზე.

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” ესპანურად.

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