განვითარებული გამოყენება
მარჯვენა-მარცხენა მიმართულების ენების მართვა
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';
// ...
}
თარგმანის გამორთვა
სტრიქონის გარკვეული ნაწილების თარგმნის გამორთვასთან ან გარკვეული სეგმენტების უცვლელად შენარჩუნებასთან დაკავშირებით, შეგიძლიათ გამოიყენოთ სამმაგი სკოეს კაუჭები triple square brackets. ეს ფუნქცია სასარგებლოა სახელების, ტექნიკური ტერმინების ან სხვა ნებისმიერი შინაარსის, რომელიც არ უნდა ითარგმნოს, ორიგინალური ფორმატის შესანარჩუნებლად.
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
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" />
);
}
მაგალითად, header login შეიძლება თარგმნიდეს როგორც “Iniciar sesión”, ხოლო footer login შეიძლება თარგმნიდეს როგორც “Acceder” ესპანურად.