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

ആധുനിക ഉപയോഗം

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 പ്രൊവൈഡർമാർ പിതൃ പ്രൊവൈഡറുകളുടെ ക്രമീകരണങ്ങൾwarisം ഏറ്റെടുത്തുകൊണ്ടിരിക്കുന്നു, അതിനാൽ നിങ്ങൾക്ക് മറ്റ് ക്രമീകരണങ്ങൾ ആവർത്തിക്കേണ്ടതില്ല.

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

അതിമുഖം തിരിച്ചർത്തൽ ഐഡികൾ ഉപയോഗിക്കുക

നിങ്ങൾക്ക് സമാനമായ സ്ട്രിങിന് വ്യത്യസ്തമായ വിവർത്തനങ്ങൾ അല്ലെങ്കിൽ അർത്ഥങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനായി 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” ആയി സ്‌പാനിഷിൽ പരിഭാഷപ്പെടുത്താം.

ശ്രേഷ്ഠ പ്രവർത്തന രീതികൾ