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

שימוש מתקדם

Hebrew

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

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 ושל ה-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>
	);
}

שימוש ב-IDs של תרגום

אתה יכול להוסיף 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” בספרדית.

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