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

અદ્યતન ઉપયોગ

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

તમે અહીં origins નો ઉપયોગ કેવી રીતે કરવો તે વિશે વધુ વાંચી શકો.

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

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