Dokumentasjon: Avansert bruk

Avansert bruk

Norwegian (Nynorsk)

Handtering av språk som blir skrivne frå høgre til venstre

TacoTranslate gjer det enkelt å 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 vert 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 gjeldande språk utanfor React.

import {isRightToLeftLocaleCode} from 'tacotranslate';

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

Deaktivere omsetjing

For å deaktivere omsetjing for bestemte delar av ein tekststreng eller for å sikre at visse segment blir verande uendra, kan du bruke triple hakeparentesar . Denne funksjonen er nyttig for å halde på det originale formatet 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 eksempelet vil ordet “TacoTranslate” forbli uendra i omsettinga.

Flere TacoTranslate-leverandørar

Vi oppmodar sterkt til å nytta fleire TacoTranslate leverandørar i appen din. Dette er nyttig for å organisera omsetjingane og strengane dine i ulike opphav, som til dømes hovudmenyen, bunnteksten eller spesifikke seksjonar.

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

TacoTranslate leverandørar arvar 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 augeblink å hente inn omsettingar, avhengig av brukarens tilkobling. Du kan vise ein lastingsindikator for å forbetre brukaropplevinga ved å gi visuell tilbakemelding under overgangen.

import {useTacoTranslate} from 'tacotranslate/react';

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

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

Fleirtalsbøying

For å handtere fleirtal og vise teljebaserte merkelappar korrekt 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 leverandørar 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 translation IDs

Du kan legge til ein id på Translate komponenten for å handtere ulike omsettingar eller tydingar for den same strengen. Dette er særleg nyttig når same tekst krev ulike omsettingar basert på kontekst. Ved å tilordne unike ID-ar, sikrar du at kvar instans av strengen blir omsett nøyaktig i tråd 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" />
	);
}

For eksempel kan header login bli omsett til “Iniciar sesión”, og footer login kan bli omsett til “Acceder” på spansk.

Beste praksis