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

Háþróuð notkun

Icelandic

Meðhöndlun tungumála 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 slíkra 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ð 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';
	// ...
}

Óvirkja þýðingu

Til að slökkva á þýðingu fyrir ákveðna hluta strengs eða til að tryggja að ákveðnir hlutar haldist óbreyttir geturðu notað triple square brackets. Þessi eiginleiki er gagnlegur til að varðveita upprunalegt form nafna, tækniorða 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” verða óbreytt í þýðingunni.

Fjölmargir TacoTranslate-veitendur

Við hvetjum eindregið til að nota marga TacoTranslate veitendur í forritinu þínu. Þetta er gagnlegt til að skipuleggja þýðingar og textastrengi eftir mismunandi uppruna, svo sem haus, fót eða tiltekna hluta.

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

TacoTranslate veitendur erfa stillingar frá hvaða æðri 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 svæðisstillingu

Auk þess að nota marga TacoTranslate veitendur geturðu einnig yfirskrifað bæði uppruna og tungumálastillingu á Translate íhlutanum og useTranslation hook-stigunum.

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ál er breytt á viðskiptavinshliðinni 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ð veita sjónræna vísbendingu meðan umskiptin eiga sér stað.

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 merkimiða sem byggjast á fjölda rétt á mismunandi tungumálum er þetta talið besta framkvæmdin:

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

Þú getur einnig yfirskrifað locale á íhluta- 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>
	);
}

Notkun þýðingarauðkenna

Þú getur bætt id við Translate íhlutinn til að meðhöndla mismunandi þýðingar eða merkingar fyrir sama texta. Þetta er sérstaklega gagnlegt þegar sami texti krefst mismunandi þýðinga eftir samhengi. Með því að úthluta einstökum auðkennum tryggir þú að hvert tilvik af textanum sé þýtt nákvæmlega í samræmi við sérstaka 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 í hausnum þýtt „Iniciar sesión“, og innskráning í fótinum gæti þýtt „Acceder“ á spænsku.

Bestu starfshættir