દસ્તાવેજીકરણ: ઉન્નત ઉપયોગ

આદ્યતન ઉપયોગ

Gujarati

ડાબીથી જમણી ભાષાઓનું સંચાલન

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 પ્રોવાઇડરોનો ઉપયોગ કરવા માટે અત્યંત પ્રોત્સાહિત કરીએ છીએ. આ તમારા અનુવાદો અને સ્ટ્રિંગ્સને અલગ અલગ ઓરિજinsu જેમ કે તમારા હેડર, ફૂટર, અથવા ખાસ વિભાગોમાં સંગઠિત કરવા માટે ઉપયોગી છે.

તમે અહીં ઓરિજિન્સના ઉપયોગ વિશે વધુ વાંચી શકો છો.

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

ઓરિજિન અથવા લોકેલ.Override કરવી

ઘણાં 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
	);
}

વચનબંધન

વિવિધ ભાષાઓમાં બહુવચન સંભાળવા અને ગણતરી-આધારિત લેબલ્સને sચૂકવટીપૂર્વક પ્રદર્શિત કરવા માટે, આ શ્રેષ્ઠ અભ્યાસ માનવામાં આવે છે:

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

અનuvad ID નો ઉપયોગ કરવો

તમે Translate કમ્પોનન્ટમાં farklı અનુવાદો અથવા અર્થો માટે id ઉમેરા કરી શકો છો. આ ખાસ કરીને ત્યારે ઉપયોગી થાય છે જ્યારે એક જ લખાણ વિવિધ સંદર્ભો પર આધારિત વિવિધ અનુવાદો માંગે. અનન્ય 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” થઈ શકે છે.

શ્રેષ્ઠ પ્રથાઓ