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

અદ્યતન વપરાશ

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

ઉત્સ અથવા લોકેલને ઓવરરાઇડ કરવી

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

સરોતમ લાક્ષણિકતાઓ