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

Háþróuð notkun

Icelandic

Meðhöndlun tungumála sem eru skrifuð 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-forritum þí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 einnig notað meðfylgjandi isRightToLeftLocaleCode fall til að athuga núverandi tungumál utan við React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Slökkva á þýðingu

Til að slökkva á þýðingu fyrir tiltekna hluta strengs eða til að tryggja að ákveðnir hlutar haldist óbreyttir geturðu notað þrefalda hornklofa. Þetta er gagnlegt til að viðhalda upprunalegu sniði nafna, tæknilegra hugtaka eða annars 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ölmargir TacoTranslate-veitendur

Við hvetjum eindregið til að nota marga TacoTranslate veitendur í forritinu þínu. Þetta er gagnlegt til að skipuleggja þýðingar þínar og textastrengi í mismunandi upprunum, svo sem í haus, fóti eða tilteknum köflum.

Þú getur lesið nánar um notkun uppruna hér.

TacoTranslate veitendur erfa stillingar frá hvaða foreldra-veitanda sem er, svo þú þarft ekki að endurtaka neinar 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 svæðisstillingu

Auk þess að nota marga TacoTranslate veitendur geturðu einnig yfirskrifað bæði upprunann og tungumálastillinguna á komponentstigi Translate og hook‑stigi useTranslation.

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 þú skiptir um tungumál í vafranum getur það tekið nokkrar sekúndur að sækja þýðingar, allt eftir nettengingu notandans. Þú getur sýnt hleðsluvísir til að bæta notendaupplifunina með því að gefa 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ölumyndun og sýna talnabundna merkimiða rétt á mismunandi tungumálum telst þetta vera besta verklag:

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 mörg tungumál samtímis í sama forriti geturðu notað marga TacoTranslate-veitendur með mismunandi locale gildum, eins og sýnt er hér að neðan:

Þú getur einnig yfirskrifað locale á komponent- eða hook-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>
	);
}

Að nota auðkenni þýðinga

Þú 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 textinn þarf ólíkar þýðingar eftir samhengi. Með því að úthluta einstökum auðkennum tryggir þú að hvert eintak strengsins 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 orðið „login“ í hausnum þýtt sem “Iniciar sesión”, en orðið „login“ í fótnum gæti þýtt sem “Acceder” á spænsku.

Bestu vinnubrögð