Dokumentasjon: Avansert bruk

Avansert bruk

Norwegian (Nynorsk)

Handsaming av språk som skrivast frå høgre til venstre

TacoTranslate gjer det enkelt å støtte høgre-til-venstre (RTL)-språk, som arabisk og hebraisk, i React-applikasjonane dine. Rett handsaming av RTL-språk sikrar at innhaldet ditt blir vist korrekt for brukarar som les frå høgre til 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';
	// ...
}

Deaktivering av omsetjing

Om du vil deaktivere omsetjing for bestemte delar av ein tekststreng, eller sørgje for at visse segment blir verande uendra, kan du bruke trippel hakeparentesar. Denne funksjonen er nyttig for å bevare originalt format på namn, tekniske termar 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-tilbydarar

Vi oppmodar sterkt til å bruke fleire TacoTranslate tilbydarar i appen din. Dette er nyttig for å organisere omsetjingane og tekststrengane dine i ulike opphav, som hovudområdet (header), bunnteksten (footer) eller bestemte seksjonar.

Du kan lese meir om korleis du brukar origins her.

TacoTranslate tilbydarar arvar innstillingar frå ein overordna tilbydar, så slepp du å 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 locale

I tillegg til å bruke fleire TacoTranslate tilbydarar, 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" />
		</>
	);
}

Handsaming av innlasting

Når du endrar språk på klientsida, kan det ta litt tid å hente omsetjingar, avhengig av brukaren sin nettforbindelse. Du kan vise ein lasteindikator for å gi visuell tilbakemelding under språkbyttet og slik forbetre brukaropplevinga.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Fleirtal

For å handsame fleirtal og vise talbaserte etikettar riktig på ulike språk, vert 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)}}
		/>
	);
}

Fleire språk

For å støtte fleire språk samstundes i den same applikasjonen, kan du bruke fleire TacoTranslate-tilbydarar med ulike locale verdiar som vist nedanfor:

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 ID-ar for omsetjing

Du kan leggje til ein id på Translate‑komponenten for å handtere ulike omsetjingar eller tydingar for same streng. Dette er særleg nyttig når same tekst krev ulike omsetjingar avhengig av kontekst. Ved å tildele unike ID-ar sørgjer du for at kvar forekomst av strengen blir omsett nøyaktig i samsvar med hennar spesifikke tyding.

import {Translate} from 'tacotranslate/react';

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

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

For eksempel kan påloggingen i toppteksten bli omsett til “Iniciar sesión”, og påloggingen i bunnteksten kan bli omsett til “Acceder” på spansk.

Beste praksisar