TacoTranslate gebruiken
Strings vertalen
Er zijn momenteel drie manieren om strings te vertalen: de Translate
component, de useTranslation
hook, of de translateEntries
utility.
Het Translate
component gebruiken.
Geeft vertalingen weer binnen een span
element, en ondersteunt het weergeven van HTML.
import {Translate} from 'tacotranslate/react';
function Page() {
return <Translate string="Hello, world!" />;
}
Je kunt het elementtype wijzigen door bijvoorbeeld as="p"
op de component te gebruiken.
Het gebruik van de useTranslation
hook.
Geeft vertalingen terug als een gewone string. Handig in bijvoorbeeld meta
tags.
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>
);
}
Het gebruik van het translateEntries
hulpprogramma.
Vertaal strings aan de serverzijde. Geef je OpenGraph afbeeldingen extra kracht.
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)
};
}
Hoe strings worden vertaald
Wanneer strings onze servers bereiken, valideren en slaan we ze eerst op en geven we direct een machinevertaling terug. Hoewel machinevertalingen over het algemeen van mindere kwaliteit zijn dan onze AI-vertalingen, bieden ze wel een snelle eerste respons.
Tegelijkertijd starten we een asynchrone vertaaktaak om een hoogwaardige, state-of-the-art AI-vertaling voor uw tekst te genereren. Zodra de AI-vertaling klaar is, zal deze de machinevertaling vervangen en worden verzonden telkens wanneer u vertalingen voor uw teksten opvraagt.
Als u een string handmatig hebt vertaald, krijgen die vertalingen voorrang en worden ze in plaats daarvan teruggegeven.
Origins gebruiken
TacoTranslate-projecten bevatten wat we origins noemen. Beschouw ze als toegangspunten, mappen of groepen voor je strings en vertalingen.
import {TacoTranslate} from 'tacotranslate/react';
function Menu() {
return (
<TacoTranslate origin="application-menu">
// ...
</TacoTranslate>
);
}
Origins stellen je in staat om strings in betekenisvolle containers te scheiden. Zo kun je bijvoorbeeld één origin hebben voor documentatie en een andere voor je marketingpagina.
Voor meer fijnmazige controle kunt u origins op componentniveau instellen.
Om dit te bereiken, overweeg meerdere TacoTranslate providers te gebruiken binnen uw project.
Houd er rekening mee dat dezelfde string in verschillende origins verschillende vertalingen kan krijgen.
Uiteindelijk bepaal je hoe je strings in origins indeelt, afhankelijk van je behoeften. Houd er echter rekening mee dat veel strings in één origin de laadtijden kunnen verhogen.
Omgaan met variabelen
Je moet altijd variabelen gebruiken voor dynamische inhoud, zoals gebruikersnamen, datums, e-mailadressen en meer.
Variabelen in strings worden gedeclareerd met dubbele accolades, zoals {{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}});
}
HTML-inhoud beheren
Standaard ondersteunt het Translate
component HTML-inhoud en geeft deze weer. U kunt dit gedrag echter uitschakelen door useDangerouslySetInnerHTML
op false
te zetten.
Het uitschakelen van HTML-rendering wordt sterk aanbevolen wanneer u onbetrouwbare inhoud vertaalt, zoals door gebruikers gegenereerde inhoud.
Alle uitvoer wordt altijd geschoond met sanitize-html voordat deze wordt weergegeven.
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}
/>
);
}
Het bovenstaande voorbeeld wordt als platte tekst weergegeven.