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

שימוש מתקדם

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, ניתן גם לעקוף הן את ה-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>
	);
}

שימוש במזהי תרגום

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

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