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';
	// ...
}

अनुवाद अक्षम करणे

स्ट्रिंगच्या विशिष्ट भागांसाठी अनुवाद अक्षम करण्यासाठी किंवा काही विभाग जशाचे तशे ठेवायचे असल्याची खात्री करण्यासाठी तुम्ही त्रि-चौकोनी कोष्टके (triple square brackets) वापरू शकता. ही सुविधा नावे, तांत्रिक संज्ञा किंवा इतर कोणताही असा मजकूर जो अनुवादायोग्य नाही तो मूळ स्वरूपात राखण्यासाठी उपयुक्त आहे.

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