Localização sem esforço para aplicações React

Como funciona

Instale o pacote TacoTranslate via npm:

npm install tacotranslate

Quando você tiver o módulo instalado, será necessário criar uma conta no TacoTranslate, um projeto de tradução e as chaves de API associadas. Crie uma conta aqui. É grátis e não exige que você adicione um cartão de crédito.

Dentro da interface da aplicação TacoTranslate, crie um projeto e navegue até a aba de chaves API. Crie uma chave read e uma chave read/write. Vamos salvá-las como variáveis de ambiente. A chave read é o que chamamos de public e a chave read/write é secret. Por exemplo, você pode adicioná-las a um arquivo .env na raiz do seu projeto.

Você também precisará adicionar mais duas variáveis de ambiente: TACOTRANSLATE_DEFAULT_LOCALE e TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: O código do idioma padrão de fallback. Neste exemplo, definiremos como en para inglês.
• TACOTRANSLATE_ORIGIN: A “pasta” onde suas strings serão armazenadas, como a URL do seu site. Leia mais sobre origins aqui.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Certifique-se de nunca vazar a chave de API secreta read/write para ambientes de produção no lado do cliente.

Configurando o TacoTranslate

Inicialize o TacoTranslate em sua aplicação React envolvendo sua aplicação no provedor de contexto do TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

Agora você pode usar o componente Translate em qualquer lugar dentro da sua aplicação para exibir textos traduzidos! Não deixe de conferir nossa documentação para mais informações e para guias de implementação específicos para sua configuração.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Benefícios de usar o TacoTranslate

• Economia de tempo: Automatiza o processo tedioso de localização e coleta de strings, economizando seu tempo valioso.
• Custo-benefício: Reduz a necessidade de traduções manuais, diminuindo seus custos de localização.
• Precisão aprimorada: Traduções com IA garantem resultados contextualmente precisos e de alta qualidade.
• Solução escalável: Adicione suporte facilmente para novos idiomas conforme seu aplicativo e base de clientes crescem.

Comece hoje mesmo!

Sua aplicação React será traduzida automaticamente quando você adicionar quaisquer strings a um componente Translate. Observe que apenas ambientes com permissões read/write na chave de API poderão criar novas strings para serem traduzidas.

Recomendamos ter um ambiente de staging fechado e seguro onde você possa testar sua aplicação em produção, adicionando novas strings antes de entrar no ar. Isso evitará que qualquer pessoa roube sua chave de API secreta e, potencialmente, inflacione seu projeto de tradução com strings indevidas.

Não deixe de ver os exemplos completos no nosso perfil do GitHub. Se encontrar algum problema, sinta-se à vontade para entrar em contato, e teremos o maior prazer em ajudar.

O TacoTranslate permite que você localize automaticamente suas aplicações React de forma rápida para qualquer idioma, e vice-versa. Traduza gratuitamente!