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

שימוש מתקדם

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

שימוש ב-translation 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" בספרדית.

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