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

שימוש מתקדם

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

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