Skjölun: Ítarleg notkun

Ítarleg notkun

Icelandic

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

TacoTranslate gerir það auðvelt að styðja við tungumál sem lesað eru 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ð föllin isRightToLeftLocaleCode sem fylgja með til að athuga núverandi tungumál utan React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Aftengja þýðingu

Til að slökkva á þýðingu fyrir ákveðna hluta strengs eða til að tryggja að tilteknir hlutar haldist óbreyttir, getur þú notað þrefaldar hornklofa. Þessi eiginleiki er gagnlegur 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 helst orðið „TacoTranslate“ óbreytt í þýðingunni.

Margar TacoTranslate þjónustuveitur

Við hvetjum eindregið til að nota marga TacoTranslate veitendur í appinu þínu. Þetta er gagnlegt til að skipuleggja þýðingar og strengi í mismunandi uppruna, svo sem haus, fót eða ákveðna kafla.

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

TacoTranslate veitendur erfa stillingar frá hvaða yfirmeistara 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>
	);
}

Yfirstýring uppruna eða staðar

Auk þess að nota marga TacoTranslate veitendur getur þú einnig slegið yfir bæði uppruna og staðsetningu á stigum Translate íhlutans og useTranslation kroksins.

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ðskiptavinasíðunni gæti tekið nokkrar sekúndur að sækja þýðingar, allt eftir tengingu notandans. Þú getur sýnt hleðsluvísir til að bæta notendaupplifunina með því að veita sjónræna endurgjöf á meðan skipt er á milli tungumála.

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 á tali rétt í mismunandi tungumálum er þetta talið 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 þú notað marga TacoTranslate veitendur með mismunandi locale gildum eins og sýnt er hér fyrir neðan:

Þú getur einnig yfirskrifað locale á þætti- eða krókhætti.

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 þýðingarauðkenni

Þú 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 krefst mismunandi þýðinga eftir samhengi. Með því að úthluta einstökum auðkennum tryggirðu að hver eintak af strengnum sé þýtt nákvæmlega samkvæmt tilteknum merkingu.

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 header login þýtt “Iniciar sesión” og footer login gæti þýtt “Acceder” á spænsku.

Bestu vinnubrögð