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

ഉന്നത ഉപയോഗം

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 പ്രൊവൈഡറുകൾ ഉപയോഗിക്കാൻ ശക്തമായി ശുപാർശിക്കുന്നു. ഇത് നിങ്ങളുടെ വിവർത്തനങ്ങളും സ്ട്രിംഗുകളും ഹെഡർ, ഫൂട്ടർ അല്ലെങ്കിൽ പ്രത്യേക വിഭാഗങ്ങൾ പോലുള്ള വ്യത്യസ്ത ഓറിജിനുകളായി ക്രമീകരിക്കാൻ ഉപകാരപ്രദമാണ്.

നിങ്ങൾക്ക് ഇവിടെ ഉറവിടങ്ങൾ ഉപയോഗിക്കുന്നതിനെക്കുറിച്ച് കൂടുതൽ വായിക്കാം.

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മെയിലും ലോക്കേലും ഓവർറൈഡ് ചെയ്യാൻ കഴിയും.

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
	);
}

ബഹുവചനീകരണം

വിവിധ ഭാഷകളിൽ ബഹുവചന (pluralization) കൈകാര്യം ചെയ്ത് എണ്ണം അധിഷ്ഠിത ലേബലുകൾ ശരിയായി പ്രദർശിപ്പിക്കാൻ ഇത് മികച്ച പ്രാക്ടീസ് ആണ്:

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>
	);
}

പരിഭാഷാ ഐഡികൾ ഉപയോഗിക്കൽ

നിങ്ങൾ 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” ആകാമെന്നും.

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