ડોક્યુમેન્ટેશન: અદ્યતન ઉપયોગ

ઉન્નત ઉપયોગ

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

અનુવાદ નિષ્ક્રિય કરવું

સ્ટ્રિંગના ખાસ ભાગો માટે અનુવાદ નિષ્ક્રિય કરવા અથવા કેટલાક વિભાગોને મૂળરૂપે જ રાખવાની ખાતરી કરવા માટે તમે 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 હૂક સ્તરે 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" />
		</>
	);
}

લોડિંગ સંભાળવું

ક્લાયન્ટ સાઇડ પર ભાષા değiştાતા સમયે, વપરાશકર્તાના કનેક્શન પર નિર્ભર રાખીને અનુવાદ મળવામાં થોડો સમય લાગી શકે છે. તમે સ્વિચ દરમિયાન દૃશ્યાત્મક પ્રતિસાદ પ્રદાન કરીને વપરાશકર્તા અનુભવ સુધારવા માટે લોડિંગ સૂચક દર્શાવી શકો છો.

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-ઓનો ઉપયોગ

તમે 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” તરીકે સ્પેનિશમાં અનુવાદ થઈ શકે છે.

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