ഡോക്യുമെന്റേഷൻ: ഉന്നത ഉപയോഗം

ഉന്നത ഉപയോഗം

Malayalam

വലത് മുതൽ ഇടത്തേക്ക് എഴുതപ്പെടുന്ന ഭാഷകൾ കൈകാര്യം ചെയ്യൽ

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 ഹുക്ക് നിലയിലെയും origin-ഉം locale-ഉം ഇരുവിനെയും override ചെയ്യാൻ കഴിയും.

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കൾ നല്കുന്നതിലൂടെ, സ്ട്രിങിന്റെ ഓരോ ഉദാഹരണവും അതിന്റെ പ്രത്യേകമായ അർത്ഥം അനുസരിച്ച് കൃത്യമായി വിവർത്തനം ചെയ്യപ്പെടുന്നുണ്ടെന്ന് നിങ്ങൾ ഉറപ്പാക്കാം.

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” ആയും സ്പാനിഷിൽ പരിഭാഷയാകാം.

ഉത്തമ പ്രവർത്തനരീതികൾ