Dokumentation: Avanceret brug

Avanceret brug

Danish

Håndtering af højre-til-venstre-sprog

TacoTranslate gør det nemt at understøtte højre-til-venstre (RTL) sprog, såsom arabisk og hebraisk, i dine React-applikationer. Korrekt håndtering af RTL-sprog sikrer, at dit indhold vises korrekt for brugere, der læser fra højre mod venstre.

import {useTacoTranslate} from 'tacotranslate/react';

function Document() {
	const {locale, isRightToLeft} = useTacoTranslate();

	return (
		<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
			<body>
				// ...
			</body>
		</html>
	);
}

Du kan også bruge den medfølgende isRightToLeftLocaleCode funktion til at kontrollere det aktuelle sprog uden for React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Deaktivering af oversættelse

For at deaktivere oversættelse af bestemte dele af en tekststreng eller for at sikre, at visse segmenter bevares som de er, kan du bruge tre firkantede parenteser. Denne funktion er nyttig til at bevare det oprindelige format af navne, tekniske termer eller andet indhold, der ikke bør oversættes.

import {Translate} from 'tacotranslate/react';

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

I dette eksempel vil ordet “TacoTranslate” forblive uændret i oversættelsen.

Flere TacoTranslate-udbydere

Vi opfordrer kraftigt til at benytte flere TacoTranslate udbydere i din app. Dette er nyttigt til at organisere dine oversættelser og tekststrenge i forskellige kilder, såsom sidehoved, sidefod eller specifikke sektioner.

Du kan læse mere om at bruge origins her.

TacoTranslate udbydere arver indstillinger fra enhver overordnet udbyder, så du ikke behøver at gentage andre indstillinger.

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>
	);
}

Overskrivning af oprindelse eller sprogindstilling

Ud over at bruge flere TacoTranslate udbydere, kan du også overskrive både origin og locale på Translate komponent- og useTranslation hook-niveauer.

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

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

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

Håndtering af indlæsning

Når du skifter sprog på klientsiden, kan det tage et par øjeblikke at hente oversættelser afhængigt af brugerens forbindelse. Du kan vise en indlæsningsindikator for at forbedre brugeroplevelsen ved at give visuel feedback under skiftet.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Pluralisering

For at håndtere pluralisering og vise antalbaserede etiketter korrekt på forskellige sprog, anses dette for bedste praksis:

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)}}
		/>
	);
}

Flere sprog

For at understøtte flere sprog samtidig i den samme applikation kan du bruge flere TacoTranslate-udbydere med forskellige locale værdier som vist nedenfor:

Du kan også tilsidesætte locale på komponent- eller hook-niveau.

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>
	);
}

Brug af oversættelses-ID'er

Du kan tilføje en id til Translate komponenten for at håndtere forskellige oversættelser eller betydninger af den samme streng. Dette er særligt nyttigt, når den samme tekst kræver forskellige oversættelser afhængigt af konteksten. Ved at tildele unikke id sikrer du, at hver forekomst af strengen oversættes nøjagtigt i henhold til dens specifikke betydning.

import {Translate} from 'tacotranslate/react';

function Header() {
	return (
		<Translate id="header" string="Login" />
	);
}

function Footer() {
	return (
		<Translate id="footer" string="Login" />
	);
}

For eksempel kan header-login blive oversat til “Iniciar sesión”, og footer-login blive oversat til “Acceder” på spansk.

Bedste praksis