Dokumentasjon: Avansert bruk

Avansert bruk

Norwegian (Nynorsk)

Handtering av språk som går frå høgre til venstre

TacoTranslate gjer det lett å støtte høgre-til-venstre (RTL) språk, som arabisk og hebraisk, i dine React-applikasjonar. Riktig handtering av RTL-språk sikrar at innhaldet ditt blir 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 oppgitte 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 omsetting

For å slå av omsetjing for bestemte delar av ein tekststreng, eller for å sikre at visse segment blir verande uendra, kan du bruke trippel klammeparentesar. Denne funksjonen er nyttig for å bevare det originale formatet på namn, tekniske omgrep eller anna innhald som ikkje skal omsettast.

import {Translate} from 'tacotranslate/react';

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

I dette eksempelet vil ordet “TacoTranslate” forbli uendra i omsettinga.

Flere TacoTranslate-leverandørar

Vi oppmodar sterkt til å nytte fleire TacoTranslate leverandørar i appen din. Dette er nyttig for å organisere omsetjingane og tekststrengane dine i ulike opphav, som til dømes topptekst, bunntekst eller spesifikke seksjonar.

Du kan lese meir om korleis du kan bruke origins her.

TacoTranslate leverandørar arvar innstillingar frå foreldra sine 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 origin eller lokalitet

I tillegg til å bruke fleire TacoTranslate leverandørar, kan du også overstyre både opphav og lokal 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 innhenting av omsetjingar ta nokre augneblinkar avhengig av brukarens tilkopling. Du kan vise ein lastingsindikator 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
	);
}

Fleirtalsformar

For å handtere fleirtalsformer og vise tellebaserte merkelappar riktig på ulike språk, blir dette rekna 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)}}
		/>
	);
}

Fleire språk

For å støtte fleire språk samtidig innanfor den same applikasjonen, kan du bruke fleire TacoTranslate providers 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 oversettings-ID-ar

Du kan legge til ein id til Translate komponenten for å handtere ulike omsettingar eller tydingar for den same strengen. Dette er spesielt nyttig når den same teksten krev ulike omsettingar basert på kontekst. Ved å tilordne unike ID-ar sikrar du at kvar instans av strengen blir omsatt nøyaktig i samsvar med si spesifikke tyding.

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 omsetjast til «Iniciar sesión», og footer login kan omsetjast til «Acceder» på spansk.

Beste praksis