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

Ítarleg notkun

Icelandic

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

TacoTranslate gerir það auðvelt að styðja við tungumál sem eru skrifuð frá hægri til vinstri (RTL), eins og 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 einnig notað þá veittu isRightToLeftLocaleCode aðgerð til að athuga núverandi tungumál utan React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Að loka þýðingu

Til að slökkva á þýðingu fyrir ákveðna hluta strengs eða til að tryggja að tilteknir kaflar haldist óbreyttir, getur þú notað þrjár hornklofa. Þessi eiginleiki er gagnlegur til að viðhalda upprunalegu formi nafna, tæknilegra hugtaka eða annarrar efnis sem á ekki að þýða.

import {Translate} from 'tacotranslate/react';

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

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

Margar TacoTranslate veitendur

Við hvetjum eindregið til að nota marga TacoTranslate veitendur í forritinu þínu. Þetta er gagnlegt til að skipuleggja þýðingar þínar og texta í mismunandi uppruna, svo sem haus, fót eða sérstöku hluta.

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

TacoTranslate veitendur erfa stillingar frá foreldra-veitanda, þannig að þú þ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 svæði

Auk þess að nota margar TacoTranslate veitendur geturðu einnig yfirskilgreint bæði uppruna og staðsetningu á bæði Translate íhlutanum og useTranslation krókunni.

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

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

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

Hönnun hleðslu

Þegar skipt er um tungumál í viðmóti notanda geta þýðingar tekið nokkurn tíma að sækja, allt eftir tengingu notandans. Þú getur sýnt hleðslutákn 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ölu og sýna merkimiða byggða á fjölda á réttan hátt á mismunandi tungumálum er þetta talið besta framkvæmd:

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 innan sama forrits geturðu notað marga TacoTranslate veitendur með mismunandi locale gildum eins og sýnt er hér fyrir neðan:

Þú getur líka slegið á yfir locale á íhluta- eða krokunarstigi.

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ð takast á við mismunandi þýðingar eða merkingar fyrir sama streng. Þetta er sérstaklega gagnlegt þegar sami texti krefst mismunandi þýðinga eftir samhengi. Með því að úthluta einstökum IDs tryggir þú að hver eintak strengsins sé þýtt nákvæmlega í samræmi við tiltekna 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 þýtt sem „Iniciar sesión“, og innskráning í fótnum gæti þýtt sem „Acceder“ á spænsku.

Bestu vinnubrögð