Skjölun: Ítarleg notkun

Háþróuð notkun

Icelandic

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

TacoTranslate gerir það auðvelt að styðja tungumál sem eru lesin frá hægri til vinstri (RTL), svo sem arabísku og hebresku, í React-forritunum þínum. Rétt meðhöndlun RTL-tungumála tryggir að efnið þitt birtist 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 líka notað tilgreinda isRightToLeftLocaleCode fallið til að kanna núverandi tungumál utan React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Slökkva á þýðingu

Til að slökkva á þýðingu fyrir ákveðna hluta textastrengs eða tryggja að ákveðnir kaflar haldist óbreyttir geturðu notað þrjá ferkantaða sviga. Þessi eiginleiki er gagnlegur til að varðveita upprunalegt form nafna, tæknitermina eða annars efnis sem á ekki að vera þýtt.

import {Translate} from 'tacotranslate/react';

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

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

Fjölmargir TacoTranslate-veitendur

Við hvetjum eindregið til að nota marga TacoTranslate veitendur í forritinu þínu. Þetta er gagnlegt til að skipuleggja þýðingarnar þínar og textastrengina í mismunandi upprunum, til dæmis haus, fót eða tiltekna kafla.

Þú getur lesið nánar um hvernig á að nota uppruna hér.

TacoTranslate veitendur erfa stillingar frá hvaða foreldra-veitanda 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 tungumálastillingu

Auk þess að nota marga TacoTranslate veitendur geturðu einnig yfirskrifað bæði uppruna og svæðisstillingu á stigum Translate íhluta og useTranslation kroka.

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

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

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

Meðhöndlun hleðslu

Þegar tungumáli er skipt á viðskiptavinshliðinni gæti það tekið nokkrar sekúndur að sækja þýðingar, allt eftir tengingu notandans. Þú getur sýnt hleðsluvísir til að bæta notendaupplifunina með sjónrænni 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 birta talnabundin merki rétt á mismunandi tungumálum er þetta talið vera besta aðferðin:

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

Mörg tungumál

Til að styðja mörg tungumál samtímis innan sama forrits geturðu notað marga TacoTranslate-veitendur með mismunandi locale gildum eins og sýnt er hér að neðan:

Þú getur einnig skrifað yfir locale á stigi íhluta eða hooks.

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

Að nota þýðinga-ID

Þú getur bætt id við Translate íhlutann til að meðhöndla mismunandi þýðingar eða merkingar fyrir sama strenginn. Þetta er sérstaklega gagnlegt þegar sami texti krefst mismunandi þýðinga eftir samhengi. Með því að úthluta einstökum auðkennum tryggir þú að hvert eintak af strengnum sé þýtt nákvæmlega í samræmi við merkingu þess.

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 þýtt „Iniciar sesión“, og innskráning í fótarinn gæti þýtt „Acceder“ á spænsku.

Bestu starfshættir