Documentação: Usando TacoTranslate

Usando o TacoTranslate

Portuguese (Brazil)

Traduzindo strings

Atualmente, existem três maneiras de traduzir strings: o componente Translate, o hook useTranslation ou a utilidade translateEntries.

Usando 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!" />;
}

Você pode alterar o tipo de elemento usando, por exemplo, as="p" no componente.

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

Usando a utilidade translateEntries.
Traduza strings no lado do servidor. Turbocharge 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 as validamos e salvamos, e então retornamos imediatamente uma tradução automática. Embora as traduções automáticas sejam geralmente de qualidade inferior em comparação com 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 por IA de alta qualidade e tecnologia de ponta para sua string. Uma vez que a tradução por IA estiver pronta, ela substituirá a tradução automática e será enviada sempre que você solicitar traduções para suas strings.

Se você traduziu uma string manualmente, essas traduções têm prioridade e são retornadas em seu lugar.

Utilizando origens

Projetos TacoTranslate contêm o que chamamos de origins. Pense neles como pontos de entrada, pastas ou grupos para suas strings e traduções.

import {TacoTranslate} from 'tacotranslate/react';

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

Origins permitem que você separe strings em contêineres significativos. Por exemplo, você pode ter uma origin para a documentação e outra para sua página de marketing.

Para um controle mais detalhado, você pode configurar origins no nível do componente.

Para conseguir isso, considere usar múltiplos provedores TacoTranslate dentro do seu projeto.

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

No final das contas, a forma como você separa as strings em origins depende de você e das suas necessidades. No entanto, note que ter muitas strings dentro de um único origin pode aumentar os tempos de carregamento.

Manipulando variáveis

Você deve sempre usar variáveis para conteúdo dinâmico, como nomes de usuários, datas, endereços de e-mail e mais.

Variáveis em strings são declaradas usando colchetes duplos, como {{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}});
}

Gerenciando conteúdo HTML

Por padrão, o componente Translate suporta e renderiza conteúdo HTML. No entanto, você pode optar por não usar esse comportamento definindo useDangerouslySetInnerHTML como false.

Desabilitar a renderização de HTML é fortemente recomendado ao traduzir conteúdo não confiável, como conteúdo gerado pelo usuário.

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

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á exibido como texto simples.

Renderização do lado do servidor