React
Usa @better-translate/react cuando los componentes de React necesiten traducciones y cambio de idioma.
1. Instala los paquetes
npm install @better-translate/core @better-translate/react2. Crea el traductor compartido
Crea src/i18n.ts:
1import { configureTranslations } from "@better-translate/core";23const en = {4 home: {5 title: "Hello",6 },7} as const;89const es = {10 home: {11 title: "Hola",12 },13} as const;1415export const translator = await configureTranslations({16 availableLocales: ["en", "es"] as const,17 defaultLocale: "en",18 fallbackLocale: "en",19 messages: { en, es },20});3. Envuelve tu aplicación
Crea o actualiza src/main.tsx:
1import React from "react";2import ReactDOM from "react-dom/client";34import { BetterTranslateProvider } from "@better-translate/react";56import { App } from "./app";7import { translator } from "./i18n";89ReactDOM.createRoot(document.getElementById("root")!).render(10 <React.StrictMode>11 <BetterTranslateProvider translator={translator}>12 <App />13 </BetterTranslateProvider>14 </React.StrictMode>,15);4. Lee las traducciones dentro de un componente
Crea src/header.tsx:
1import { useTranslations } from "@better-translate/react";23import { translator } from "./i18n";45export function Header() {6 const { locale, setLocale, t } = useTranslations<typeof translator>();78 return (9 <header>10 <h1>{t("home.title")}</h1>11 <button onClick={() => setLocale("en")} disabled={locale === "en"}>12 English13 </button>14 <button onClick={() => setLocale("es")} disabled={locale === "es"}>15 Espanol16 </button>17 </header>18 );19}Opcional: tipa useTranslations() una vez para toda la aplicación
Si quieres que useTranslations() autocomplete las claves de traducción sin
repetir <typeof translator> en cada componente, añade un archivo de declaración:
Crea src/better-translate.d.ts:
1import { translator } from "./i18n";23declare module "@better-translate/react" {4 interface BetterTranslateReactTypes {5 translator: typeof translator;6 }7}Entonces tus componentes pueden llamar al hook sin un genérico:
1import { useTranslations } from "@better-translate/react";23export function Header() {4 const { locale, setLocale, t } = useTranslations();56 return (7 <header>8 <h1>{t("home.title")}</h1>9 <button onClick={() => setLocale("en")} disabled={locale === "en"}>10 English11 </button>12 <button onClick={() => setLocale("es")} disabled={locale === "es"}>13 Espanol14 </button>15 </header>16 );17}Los genéricos explícitos siguen funcionando, así que puedes seguir usando useTranslations<typeof translator>()
donde eso se ajuste mejor a tu código.
Cuándo usar solo React
Usa solo @better-translate/core + @better-translate/react cuando:
- tu aplicación es una SPA de React
- tu aplicación es una aplicación de Expo
- los cambios de idioma ocurren en componentes de cliente
Si estás en Next.js App Router, conserva este paquete para los hooks de cliente y añade el adaptador de Next.js para el enrutamiento y helpers del servidor.
Genera archivos de idioma automáticamente
En lugar de escribir cada traducción a mano, usa la CLI para extraer cadenas y generar archivos de idioma: Guía de CLI