Dokumentation: Använda TacoTranslate

Använda TacoTranslate

Swedish

Översätta strängar

Det finns för närvarande tre sätt att översätta strängar: Translate komponenten, useTranslation hooken, eller translateEntries verktyget.

Använda Translate komponenten.
Producerar översättningar inom ett span element och stödjer rendering av HTML.

import {Translate} from 'tacotranslate/react';

function Page() {
	return <Translate string="Hello, world!" />;
}

Du kan ändra elementtypen genom att använda till exempel as="p" på komponenten.

Använda useTranslation hooken.
Returnerar översättningar som en vanlig sträng. Användbart i till exempel meta taggar.

import {useEffect} from 'react';
import {useTranslation} from 'tacotranslate/react';

function Page() {
	const helloWorld = useTranslation('Hello, world!');

	useEffect(() => {
		alert(helloWorld);
	}, [helloWorld]);

	return (
		<title>{useTranslation('My page title')}</title>
	);
}

Använda translateEntries verktyget.
Översätt strängar på serversidan. Ge extra kraft åt dina OpenGraph bilder.

import {createEntry, translateEntries} from 'tacotranslate';

async function generateMetadata(locale = 'es') {
	const title = createEntry({string: 'Hello, world!'});
	const description = createEntry({string: 'TacoTranslate on the server'});

	const translations = await translateEntries(
		tacoTranslate,
		{origin: 'opengraph', locale},
		[title, description]
	);

	return {
		title: translations(title),
		description: translations(description)
	};
}

När strängar når våra servrar validerar och sparar vi dem först, och returnerar sedan genast en maskinöversättning. Även om maskinöversättningar generellt är av lägre kvalitet jämfört med våra AI-översättningar, ger de ett snabbt initialt svar.

Samtidigt initierar vi ett asynkront översättningsjobb för att generera en högkvalitativ, toppmodern AI-översättning för din sträng. När AI-översättningen är klar kommer den att ersätta maskinöversättningen och skickas varje gång du begär översättningar för dina strängar.

Om du har översatt en sträng manuellt har dessa översättningar företräde och returneras istället.

Använda ursprung

TacoTranslate-projekt innehåller det vi kallar origins. Tänk på dem som startpunkter, mappar eller grupper för dina strängar och översättningar.

import {TacoTranslate} from 'tacotranslate/react';

function Menu() {
	return (
		<TacoTranslate origin="application-menu">
			// ...
		</TacoTranslate>
	);
}

Origins låter dig separera strängar i meningsfulla behållare. Till exempel kan du ha en origin för dokumentation och en annan för din marknadssida.

För mer detaljerad kontroll kan du konfigurera origins på komponentnivå.

För att uppnå detta, överväg att använda flera TacoTranslate providers inom ditt projekt.

Observera att samma sträng kan få olika översättningar i olika origins.

I slutändan är det upp till dig och dina behov hur du delar upp strängar i origins. Observera dock att många strängar inom ett och samma origin kan öka laddningstiderna.

Hantera variabler

Du bör alltid använda variabler för dynamiskt innehåll, såsom användarnamn, datum, e-postadresser och mer.

Variabler i strängar deklareras med dubbla klammerparenteser, som {{variable}}.

import {Translate} from 'tacotranslate/react';

function Greeting() {
	const name = 'Juan';
	return <Translate string="Hello, {{name}}!" variables={{name}} />;
}

import {useTranslation} from 'tacotranslate/react';

function useGreeting() {
	const name = 'Juan';
	return useTranslation('Hello, {{name}}!', {variables: {name}});
}

Hantera HTML-innehåll

Som standard stödjer och renderar Translate komponenten HTML-innehåll. Du kan dock välja att avstå från detta beteende genom att sätta useDangerouslySetInnerHTML till false.

Att inaktivera HTML-rendering rekommenderas starkt när man översätter innehåll som inte är betrott, såsom användargenererat innehåll.

All output är alltid sanerad med sanitize-html innan den renderas.

import {Translate} from 'tacotranslate/react';

function Page() {
	return (
		<Translate
			string={`
				Welcome to <strong>my</strong> website.
				I’m using <a href="{{url}}">TacoTranslate</a> to translate text.
			`}
			variables={{url: 'https://tacotranslate.com'}}
			useDangerouslySetInnerHTML={false}
		/>
	);
}

Exemplet ovan kommer att visas som vanlig text.

Server-rendering på serversidan

Använda TacoTranslate

Hur strängar översätts

Använda ursprung

Hantera variabler

Hantera HTML-innehåll