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

שימוש מתקדם

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 ברמת הקומפוננטה או ההוק.

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

שיטות מומלצות