डॉक्युमेंटेशन: प्रगत वापर

प्रगत वापर

Marathi

उजव्यापासून डाव्याकडे भाषांशी व्यवहार करणे

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

मूळ किंवा स्थानिक ओव्हरराईड करणे

अनेक 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)}}
		/>
	);
}

अनेक भाषा

एकाच अनुप्रयोगात एकाच वेळी अनेक भाषा समर्थित करण्यासाठी, आपण खाली दाखविल्याप्रमाणे वेगवेगळ्या 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>
	);
}

अनुवाद आयडी वापरणे

आपण Translate कॉम्पोनेंट मध्ये id जोडू शकता जेणेकरून त्याच स्ट्रिंगसाठी वेगवेगळ्या भाषांतर किंवा अर्थ हाताळता येतील. हे विशेषतः उपयुक्त आहे जेव्हा त्याच मजकूराचा संदर्भानुसार वेगळा अर्थ लागत असेल. वेगळे unique IDs देऊन, आपण त्या स्ट्रिंगच्या प्रत्येक उदाहरणाचे त्याच्या विशिष्ट अर्थानुसार अचूक भाषांतर सुनिश्चित करता.

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” असे होऊ शकते.

उत्तम पद्धती