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

שימוש מתקדם

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 ברמה של הרכיב או ה-hook.

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

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