TacoTranslate
/
दस्तऐवजीकरणकिंमत
 
  1. परिचय
  2. सुरुवात
  3. सेटअप आणि कॉन्फिगरेशन
  4. TacoTranslate वापरणे
  5. सर्व्हर-साइड रेंडरिंग
  6. प्रगत वापर
  7. सर्वोत्तम पद्धती
  8. त्रुटी हाताळणी आणि डिबगिंग
  9. समर्थित भाषा

प्रगत वापर

उजव्या ते डाव्या लिहिणाऱ्या भाषांचे व्यवस्थापन

TacoTranslate आपल्या React अनुप्रयोगांमध्ये अरबी आणि हिब्रू यांसारख्या उजवीकडून डावीकडे (RTL) वाचल्या जाणाऱ्या भाषांसाठी समर्थन सहजतेने उपलब्ध करवते. 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>
	);
}

मुळ स्रोत (origin) किंवा स्थानिक सेटिंग (locale) ओव्हरराइड करणे

अनेक TacoTranslate प्रदाते वापरण्याव्यतिरिक्त, आपण Translate कॉम्पोनेंट आणि useTranslation हुक स्तरांवर origin आणि locale हे दोन्ही ओव्हरराईड करू शकता.

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

अनेक भाषा

एकाच अनुप्रयोगात एकाच वेळी अनेक भाषांचे समर्थन करण्यासाठी, आपण खाली दाखविल्याप्रमाणे वेगवेगळ्या locale मूल्यांसह एकाधिक TacoTranslate प्रदाते वापरू शकता:

आपण 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 कंपोनेंटमध्ये जोडू शकता. जेव्हा त्या समान मजकुराला संदर्भानुसार वेगवेगळे अनुवाद आवश्यक असतात तेव्हा हे विशेषतः उपयुक्त असते. अद्वितीय ID देऊन, तुम्ही सुनिश्चित करता की स्ट्रिंगची प्रत्येक आवृत्ती तिच्या विशिष्ट अर्थानुसार अचूकपणे अनुवादित होते.

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” असे अनुवादित होऊ शकतात.

सर्वोत्तम पद्धती

Nattskiftet कडून एक उत्पादननॉर्वेत बनवले