Skjölun: Fínstillt notkun

Háþróuð notkun

Icelandic

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

TacoTranslate gerir það auðvelt að styðja rétt 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ð isRightToLeftLocaleCode fallið sem fylgir til að athuga núverandi tungumál utan React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Þeersla á þýðingu

Til að gera þýðingu óvirka fyrir tilteknar hluta textastrengs eða tryggja að ákveðnir hlutir haldist óbreyttir, geturðu notað þrjár hornklofa. Þessi eiginleiki er gagnlegur til að viðhalda upprunalegri framsetningu nafna, tæknifyrirsagna 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ölmargir TacoTranslate veitendur

Við hvetjum eindregið til að nota marga TacoTranslate veitendur í appinu þínu. Þetta er gagnlegt til að skipuleggja þýðingar þínar og strengina í mismunandi uppruna, svo sem haus, fótn eða sérstakar deildir.

Þú getur lesið meira um að nýta uppruna hér.

TacoTranslate veitendur erfða 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 staðbundnum stillingum

Auk þess að nota marga TacoTranslate veitendur, getur þú einnig yfirkveikt bæði uppruna og tungumál á bæði Translate íhlutanum og useTranslation hook-stiginu.

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 á viðmóti notanda gæti það tekið smá stund 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 umskiptin fara fram.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Fjöldatala

Til að takast á við fleirtölu og sýna talningartengd merki rétt á mismunandi tungumálum er þetta talið besta starfshátturinn:

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 í sömu forritinu getur þú notað marga TacoTranslate þjónustuaðila með mismunandi locale gildum eins og sýnt er hér fyrir neðan:

Þú getur einnig yfirskrifað locale á íhluta- eða krokrastigi.

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 textastrenginn. Þetta er sérstaklega gagnlegt þegar sami texti krefst mismunandi þýðinga eftir samhengi. Með því að úthluta einstökum ID tryggir þú að hver eintak af textastrengnum sé þýtt nákvæmlega samkvæmt ákveðinni 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 header login þýtt “Iniciar sesión” og footer login gæti þýtt “Acceder” á spænsku.

Bestu vinnubrögð