TacoTranslate
/
દસ્તાવેજીકરણભાવ
 
  1. પરિચય
  2. શરૂઆત
  3. સેટઅપ અને રૂપરેખાંકન
  4. TacoTranslate નો ઉપયોગ
  5. સર્વર-સાઇડ રેન્ડરિંગ
  6. ઉન્નત ઉપયોગ
  7. શ્રેષ્ઠ પ્રથાઓ
  8. ત્રુટિ સંભાળ અને ડિબગીંગ
  9. સમર્થિત ભાષાઓ

ઉન્નત ઉપયોગ

જમણેથી ડાબા તરફ લખાતી ભાષાઓનું સંચાલન

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 હૂક સ્તરે 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-ઓનો ઉપયોગ

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

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

Nattskiftet નું ઉત્પાદનનોર્વેમાં બનાવેલું