תיעוד: שימושים מתקדמים

שימוש מתקדם

Hebrew

טיפול בשפות מימין לשמאל

TacoTranslate מקל על התמיכה בשפות הנכתבות מימין לשמאל (RTL), כגון ערבית ועברית, ביישומי React שלך. טיפול נכון בשפות הנכתבות מימין לשמאל מבטיח שהתוכן יוצג כראוי למשתמשים הקוראים מימין לשמאל.

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

החלפת המקור או ה־locale

בנוסף לשימוש במספר ספקי TacoTranslate, ניתן גם לעקוף הן את המקור והן את ההגדרה המקומית ברמת הרכיב Translate וברמת ה-hook 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 לרכיב Translate כדי לטפל בתרגומים שונים או במשמעויות שונות לאותה מחרוזת. זה מועיל במיוחד כאשר אותו טקסט דורש תרגומים שונים בהתאם להקשר. הקצאת מזהים ייחודיים מבטיחה שכל מופע של המחרוזת יתורגם במדויק בהתאם למשמעותו הספציפית.

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” בספרדית.

שיטות עבודה מומלצות