Dokumentasjon: Avansert bruk

Avansert bruk

Norwegian (Bokmål)

Håndtering av høyre-til-venstre språk

TacoTranslate gjør det enkelt å støtte høyre-til-venstre (RTL) språk, som arabisk og hebraisk, i dine React-applikasjoner. Korrekt håndtering av RTL-språk sikrer at innholdet ditt vises riktig for brukere som leser fra høyre mot 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å bruke den medfølgende isRightToLeftLocaleCode funksjonen for å sjekke gjeldende språk utenfor React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Deaktivere oversettelse

For å deaktivere oversettelse for spesifikke deler av en tekststreng eller for å sikre at visse segmenter bevares som de er, kan du bruke triple hakeparenteser. Denne funksjonen er nyttig for å bevare det opprinnelige formatet på navn, tekniske termer eller annet innhold som ikke skal oversettes.

import {Translate} from 'tacotranslate/react';

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

I dette eksemplet vil ordet “TacoTranslate” forbli uendret i oversettelsen.

Flere TacoTranslate-leverandører

Vi oppfordrer sterkt til å bruke flere TacoTranslate leverandører i appen din. Dette er nyttig for å organisere oversettelsene og tekstene dine i forskjellige opprinnelser, som for eksempel headeren, footeren eller spesifikke seksjoner.

Du kan lese mer om hvordan du bruker origins her.

TacoTranslate leverandører arver innstillinger fra eventuelle overordnede leverandører, så du slipper å gjenta andre innstillinger.

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

Overstyre opprinnelse eller lokalitet

I tillegg til å bruke flere TacoTranslate providere, kan du også overstyre både opprinnelse og lokalitet på Translate komponent- og useTranslation hook-nivåer.

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 av lasting

Når du bytter språk på klientsiden, kan det ta noen øyeblikk å hente oversettelser avhengig av brukerens tilkobling. Du kan vise en lasteindikator for å forbedre brukeropplevelsen ved å gi visuell tilbakemelding under byttet.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Flertallsform

For å håndtere flertallsformer og vise antallsbaserte etiketter korrekt på forskjellige språk, regnes dette som beste 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 språk

For å støtte flere språk samtidig i samme applikasjon, kan du bruk flere TacoTranslate leverandører med forskjellige locale verdier som vist nedenfor:

Du kan også overstyre locale på komponent- eller hook-nivå.

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

Bruke oversettelses-ID-er

Du kan legge til en id til Translate komponenten for å håndtere forskjellige oversettelser eller betydninger for den samme teksten. Dette er spesielt nyttig når samme tekst krever forskjellige oversettelser basert på kontekst. Ved å tildele unike ID-er sikrer du at hver forekomst av teksten oversettes nøyaktig i henhold til dens spesifikke 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 oversettes til “Iniciar sesión”, og footer login kan oversettes til “Acceder” på spansk.

Beste praksis