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

שימוש מתקדם

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, ניתן גם לעקוף הן את המקור והן את ה-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” בספרדית.

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