VBSS Translator

Tradução para React sem chaves: t("Olá") direto no texto, com fallback automático.

Hook de tradução leve para React com integração ao Google Translate, detecção automática de idioma do navegador, persistência local, chaves dinâmicas e CLI gerador.

Lightweight React translation hook with Google Translate integration, browser language auto-detection, local persistence, dynamic keys and a CLI generator.

React · TypeScript | Ao vivo

Acessar VBSS Translator

Código no GitHub

Sobre

Bibliotecas de i18n pedem chaves aninhadas e dicionários que saem de sincronia com o código. No vbss-translator o próprio texto é a chave: você escreve t("Olá") e ele acha a tradução em qualquer idioma.

Está em 5 projetos VBSS, este site incluído.

Telas

Documentação: instalação e início rápido.

Detecção de idioma, persistência e tradução externa opcional.

Pontos fortes

O texto é a chave

t(texto) procura em qualquer idioma, sem diferenciar maiúscula. Dá para escrever a interface em português e traduzir para inglês, ou o contrário.

Fallback externo sob controle

Tradução pelo Google ou por um provider seu, desligada por padrão. Tem cache com expiração, chamadas deduplicadas e veto por regra, para controlar custo.

CLI gerador

vbss-translator generate junta JSONs espalhados num índice tipado, valida idiomas e remove duplicatas. Tem modo watch.

Cobertura mínima de 80%

239 casos de teste, incluindo integração e o CLI de ponta a ponta, com limite de 80% em statements, branches, functions e lines.

Funcionalidades

Provider e hook useTranslator
Detecção do idioma do navegador e persistência da escolha
Tradução externa opcional, com Google ou provider próprio
CLI generate com watch
Gerador programático e builds ESM e CJS

Como foi feito

Arquitetura

Biblioteca TypeScript compilada pelo Vite em três saídas: a lib, o gerador e o CLI.

Provider plugável

A tradução externa entra por uma factory, em vez de ficar amarrada ao Google.

Desligado por padrão

Nada vai para fora sem você ligar. Quem decide o que pode ser traduzido por API é a regra de veto.

Código

import { TranslatorProvider, useTranslator } from "vbss-translator";

const translations = [{ pt: "Olá", en: "Hello" }];

export const Root = () => (
  <TranslatorProvider translations={translations} defaultLanguage="pt" autoDetectLanguage persist>
    <Greeting />
  </TranslatorProvider>
);

const Greeting = () => {
  const { t } = useTranslator();
  return <h1>{t("Olá")}</h1>;
};

É assim que este site é traduzido.