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

એડવાન્સ્ડ ઉપયોગ

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 હૂક સ્તરો પર મૂળ અને લોકેલ બંનેને મર્યાદિત કરી શકો છો.

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

સર્વોત્કૃષ્ટ અભ્યાસ