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

שימוש מתקדם

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>
	);
}

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

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

שיטות מומלצות