A traduzir cadeias de caracteres

Existem atualmente três maneiras de traduzir strings: o componente Translate, o hook useTranslation ou a utility translateEntries.

Usar o componente Translate.
Exibe traduções dentro de um elemento span, e suporta a renderização de HTML.

import {Translate} from 'tacotranslate/react';

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

Pode mudar o tipo de elemento usando, por exemplo, as="p" no componente.

Utilizar o hook useTranslation.
Retorna traduções como uma string simples. Útil, por exemplo, em tags meta.

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>
	);
}

Usar a utilidade translateEntries.
Traduza strings no lado do servidor. Dê um impulso extra às suas imagens OpenGraph.

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)
	};
}

Como as strings são traduzidas

Quando as strings chegam aos nossos servidores, primeiro validamo-las e guardamo-las, depois retornamos imediatamente uma tradução automática. Embora as traduções automáticas sejam geralmente de qualidade inferior em comparação com as nossas traduções por IA, elas fornecem uma resposta inicial rápida.

Simultaneamente, iniciamos um trabalho de tradução assíncrono para gerar uma tradução de IA de alta qualidade e de última geração para a sua string. Assim que a tradução de IA estiver pronta, ela substituirá a tradução automática e será enviada sempre que solicitar traduções para as suas strings.

Se tiver traduzido uma string manualmente, essas traduções têm prioridade e serão retornadas em vez disso.

Aproveitar origens

Os projetos TacoTranslate contêm aquilo a que chamamos origens. Pense nelas como pontos de entrada, pastas ou grupos para as suas cadeias de texto e traduções.

As origens permitem-lhe separar strings em contêineres significativos. Por exemplo, pode ter uma origem para a documentação e outra para a sua página de marketing.

Para um controlo mais detalhado, pode configurar origens ao nível do componente.

Para conseguir isto, considere usar múltiplos fornecedores TacoTranslate dentro do seu projeto.

Por favor, note que a mesma string pode receber traduções diferentes em diferentes origens.

Em última análise, a forma como separa as strings em origins depende de si e das suas necessidades. No entanto, note que ter muitas strings numa única origin pode aumentar os tempos de carregamento.

Manipulação de variáveis

Deve sempre usar variáveis para conteúdo dinâmico, como nomes de utilizadores, datas, endereços de e-mail e mais.

As variáveis nas strings são declaradas usando colchetes duplos, como {{variable}}.

Gerir conteúdo HTML

Por defeito, o componente Translate suporta e renderiza conteúdo HTML. No entanto, pode optar por não utilizar este comportamento definindo useDangerouslySetInnerHTML como false.

Desativar a renderização HTML é fortemente recomendado ao traduzir conteúdo não confiável, como conteúdo gerado pelo utilizador.

Todas as saídas são sempre sanitizadas com sanitize-html antes de serem apresentadas.

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}
		/>
	);
}

O exemplo acima será apresentado como texto simples.