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

Háþróuð notkun

Icelandic

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

TacoTranslate gerir það auðvelt að styðja tungumál sem skrifast 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ð meðfylgjandi isRightToLeftLocaleCode fallið til að athuga núverandi tungumál utan 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 tryggja að tilteknir kaflar haldist óbreyttir getur þú notað þrefaldar hornklofar. Þessi eiginleiki er gagnlegur til að varðveita upprunalegt útlit 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” vera óbreytt í þýðingunni.

Fjölmargir TacoTranslate-veitendur

Við hvetjum eindregið til að nýta marga TacoTranslate veitendur í forritinu þínu. Þetta er gagnlegt til að skipuleggja þýðingar þínar og strengina í mismunandi upprunum, svo sem í hausnum, fótinum eða í ákveðnum hlutum.

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

TacoTranslate veitendur erfa stillingar frá öllum foreldra-veitendum, þ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æðisstillingu

Auk þess að nota marga TacoTranslate veitendur getur þú einnig yfirstýrt bæði uppruna og tungumál á 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 tungumál er breytt í vafranum getur það tekið nokkurn tíma 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 skiptin standa yfir.

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

Þú getur einnig yfirskrifað locale á stigi íhluta eða hooks.

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 id við Translate íhlutann til að meðhöndla mismunandi þýðingar eða merkingar sama texta. Þetta er sérstaklega gagnlegt þegar sami texti krefst mismunandi þýðinga eftir samhengi. Með því að úthluta einstökum auðkennum tryggirðu að hvert eintak textans sé þýtt nákvæmlega eftir þeirri merkingu sem það hefur.

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ótnum þýtt „Acceder“ á spænsku.

Bestu vinnubrögð