Skjölun: Háþróuð notkun

Ítarleg notkun

Icelandic

Meðhöndlun tungumála sem eru skrifuð frá hægri til vinstri

TacoTranslate gerir það auðvelt að styðja við hægri-til-vinstri (RTL) tungumál, eins og arabísku og hebresku, í React forritunum þínum. Rétt meðhöndlun RTL tungumála tryggir að efnið þitt sé sýnt rétt fyrir notendur sem lesa frá hægri til vinstri.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Þú getur einnig notað fasta isRightToLeftLocaleCode fallið til að athuga núverandi tungumál utan React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Þingþýðingu

Til að gera þýðingu óvirka fyrir tilteknar hluta strengs eða til að tryggja að ákveðnir hlutar verði varðveittir óbreyttir geturðu notað þrefalda hornklofa triple square brackets. Þessi eiginleiki er gagnlegur til að halda upprunalegu sniði nafna, tæknilegra hugtaka eða annarra efnis sem ekki á að þýða.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

Í þessu dæmi mun orðið „TacoTranslate“ haldast óbreytt í þýðingunni.

Fjölbreyttir TacoTranslate veitendur

Við mælum eindregið með að nota marga TacoTranslate veitendur í appinu þínu. Þetta er gagnlegt til að skipuleggja þýðingar þínar og strengina í mismunandi uppruna, svo sem haus, fót eða sérstaka hluta.

Þú getur lesið meira um notkun uppruna hér.

TacoTranslate veitendur erfa stillingar frá hvaða foreldravetanda sem er, svo þú þarft ekki að endurtaka aðrar stillingar.

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

Yfirskrifa uppruna eða staðarforseta

Auk þess að nota marga TacoTranslate veitendur, getur þú einnig yfirskrifað bæði uppruna og staðsetningu á Translate íhlutanum og useTranslation krókinum.

import {Translate, useTranslation} from 'tacotranslate/react';

function Greeting() {
	const spanishHello = useTranslation('Hello!', {locale: 'es'});

	return (
		<>
			{spanishHello}
			<Translate string="What’s up?" origin="greeting" />
		</>
	);
}

Að takast á við hleðslu

Þegar verið er að skipta um tungumál á viðskiptavinahlið getur verið tekið smá augnablik að sækja þýðingar, allt eftir tengingu notandans. Þú getur sýnt hleðsluvísbendingu til að bæta upplifun notandans með því að veita sjónræna endurgjöf meðan á skiptingunni stendur.

import {useTacoTranslate} from 'tacotranslate/react';

function Component() {
	const {isLoading} = useTacoTranslate();

	return (
		isLoading ? 'Translations are loading...' : null
	);
}

Fleirtala

Til að meðhöndla fleirtölu og sýna talningarmerki rétt í mismunandi tungumálum, er þetta talið besta vinnubrögð:

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

Fjölmörg tungumál

Til að styðja margar tungur samtímis innan sömu forritsins getur þú notað marga TacoTranslate veitendur með mismunandi locale gildum eins og sýnt er hér að neðan:

Þú getur einnig jafnað fyrir locale á viðkomandi íhluta- eða kroku-stigi.

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

Notkun þýðingarauðkenna

Þú getur bætt við id á Translate íhlutinn til að meðhöndla mismunandi þýðingar eða merkingar fyrir sama strenginn. Þetta er sérstaklega gagnlegt þegar sami texti þarf mismunandi þýðingar eftir samhengi. Með því að úthluta einstökum ID tryggir þú að hver eintak af strengnum sé þýtt nákvæmlega samkvæmt sérstökum merkingu hans.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

Til dæmis gæti innskráning í hausinn þýst sem „Iniciar sesión“, og innskráning í fótinn gæti þýst sem „Acceder“ á spænsku.

Bestu vinnubrögð