Dokumentasjon: Avansert bruk

Avansert bruk

Norwegian (Bokmål)

Håndtering av språk som går fra høyre til venstre

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 det nåværende språket 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 beholdes som de er, kan du bruke tredoble firkantede klammer. Denne funksjonen er nyttig for å bevare det opprinnelige formatet til 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, slik som overskriften, bunnteksten eller spesifikke seksjoner.

Du kan lese mer om bruk av opprinnelser her.

TacoTranslate leverandører arver innstillinger fra en hvilken som helst overordnet leverandør, 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 locale

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

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 overgangen.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Flertallsformer

For å håndtere flertallsformer og vise tellebaserte etiketter korrekt på forskjellige språk, anses 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 innenfor samme applikasjon, kan du bruke 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 i Translate komponenten for å håndtere forskjellige oversettelser eller betydninger for samme tekststreng. Dette er spesielt nyttig når samme tekst krever ulike oversettelser basert på kontekst. Ved å tildele unike ID-er sikrer du at hver forekomst av tekststrengen blir korrekt oversatt 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