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

שימוש מתקדם

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

עקיפת מקור או לוקאל

בנוסף לשימוש במספר ספקי 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” בספרדית.

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