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

അതിനിടയിൽ ഉപയോഗം

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

നിങ്ങൾക്ക് React പുറത്ത് നിലവിലുള്ള ഭാഷ പരിശോധിക്കാൻ നൽകിയിരിക്കുന്നു isRightToLeftLocaleCode ഫംഗ്ഷൻ ഉപയോഗിക്കാം.

import {isRightToLeftLocaleCode} from 'tacotranslate';

function foo(locale = 'es') {
	const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
	// ...
}

ത്ര wg.പ്പെടുത്തിയ.ചെയ്യല്‍ നിർത്തലാക്കല്‍

ഒരു സ്ട്രിംഗിന്റെ പ്രത്യേക ഭാഗങ്ങളുടെ വിവർത്തനം നിർത്താനും ചില സെഗ്മെന്റുകൾ മാറ്റമില്ലാതെ നിലനിർത്താനും, നിങ്ങൾക്ക് ത്രിപിള്‍ സ്ക്വയർ ബ്രാക്കറ്റുകൾ ഉപയോഗിക്കാം. പേരുകൾ, സാങ്കേതിക പദങ്ങൾ, അല്ലെങ്കിൽ വിവർത്തനം ചെയ്യേണ്ടതില്ലാത്ത മറ്റു ഉള്ളടക്കങ്ങളുടെ യഥാർത്ഥ ഫോർമാറ്റ് നിലനിർത്താൻ ഈ ഫീച്ചർ ഉപകാരപ്രദമാണ്.

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

பலഭാഷകൾ

ഒരു പ്രയോഗത്തിനുള്ളിൽ ഒരേസമയം നിരവധി ഭാഷകൾ പിന്തുണയ്ക്കാൻ, നിങ്ങൾക്ക് പല TacoTranslate sağlayıcıകൾ വ്യത്യസ്ത 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>
	);
}

അനുവാദ IDs ഉപയോഗിച്ച്

നിങ്ങൾക്ക് ഒരേ സ്ട്രിങിനുള്ള വ്യത്യസ്ത അനുഭവവ്യാഖ്യാനങ്ങൾ അല്ലെങ്കിൽ അർത്ഥങ്ങൾ കൈകാര്യം ചെയ്യാൻ Translate കോമ്പോണന്റിന് id ചേർക്കാം. ഒരേ ടെക്സ്റ്റിന് context അടിസ്ഥാനമാക്കി വ്യത്യസ്ത വിവർത്തനങ്ങൾ ആവശ്യമുള്ളപ്പോൾ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. വ്യത്യസ്ത അന്തർവ്യോഖ്യാനങ്ങൾക്കായി ഏകദേശം തിരിച്ചറിയുന്ന ഐഡികൾ നല്‍കി, ഓരോ സ്ട്രിങ് ഉദാഹരണവും അതിന്റെ പ്രത്യേക അർത്ഥപ്രകാരം കൃത്യമായി വിവർത്തനം ചെയ്യപ്പെടുന്നതായി ഉറപ്പാക്കാം.

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” ആയി സ്പാനിഷിൽ പരിഭാഷപ്പെടുത്താമെന്ന് ചെയ്തു.

മികവുറ്റ പ്രഥമിക രീതികൾ