Dokumentasjon: Avansert bruk

Avansert bruk

Norwegian (Nynorsk)

Handtering av høgre-til-venstre språk

TacoTranslate gjer det enkelt å støtte høgre-til-veke (RTL) språk, slik som arabisk og hebraisk, i React-applikasjonane dine. Riktig handtering av RTL-språk sørgjer for at innhaldet ditt vert vist korrekt for brukarar som les frå høgre 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 òg bruke den medfølgjande isRightToLeftLocaleCode funksjonen for å sjekke det gjeldande språket utanfor React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Deaktivere omsetjing

For å deaktivere omsetjing for spesifikke delar av ein tekststreng eller for å sikre at visse segment blir bevart som dei er, kan du bruke trippel hakeparentesar. Denne funksjonen er nyttig for å halde på originalformatet til namn, tekniske omgrep eller anna innhald som ikkje skal omsetjast.

import {Translate} from 'tacotranslate/react';

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

I dette dømet vil ordet “TacoTranslate” halde seg uendra i omsetjinga.

Fleire TacoTranslate-leverandørar

Vi oppmodar sterkt til å bruke fleire TacoTranslate leverandørar i appen din. Dette er nyttig for å organisere omsetjingane og strengane dine i ulike opphav, som for eksempel hovud, fot eller bestemte seksjonar.

Du kan lese meir om bruk av origins her.

TacoTranslate leverandørar overtek innstillingar frå eventuelle overordna leverandørar, så du treng ikkje å gjenta andre innstillingar.

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

Overstyring av opphav eller lokalitet

I tillegg til å bruke fleire TacoTranslate leverandørar, kan du òg overstyre både origin og locale 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" />
		</>
	);
}

Handtering av lasting

Når du byter språk på klientsida, kan det ta nokre augneblink å hente omsettingar, avhengig av brukarens tilkopling. Du kan vise ein lastarindikator for å forbetre brukaropplevinga ved å gi visuell tilbakemelding under byttet.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Fleirtalsbøying

For å handtere fleirtal og vise tellebaserte merkelappar korrekt på ulike språk, blir dette rekna som god 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 fleire språk samtidig i same applikasjon, kan du bruke fleire TacoTranslate-tilbydarar med ulike locale verdiar som vist under:

Du kan òg 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 translation IDs

Du kan legge til ein id i Translate komponenten for å handtere ulike oversetjingar eller tydingar for same tekststreng. Dette er spesielt nyttig når same tekst krev forskjellige omsetjingar basert på kontekst. Ved å tilordne unike ID-ar, sørgjer du for at kvar enkelt forekomst av tekststrengen blir korrekt omsett i samsvar med den spesifikke tydinga.

import {Translate} from 'tacotranslate/react';

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

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

Til dømes kan header login verte omsett til «Iniciar sesión», og footer login kan verte omsett til «Acceder» på spansk.

Beste praksis