React

Usa @better-translate/react cuando los componentes React necesiten traducciones y cambio de locale.

1. Instalar los paquetes

npm install @better-translate/core @better-translate/react

2. Crear 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. Crear un par provider + hook tipado

Si quieres que useTranslations() autocomplete claves y locales sin repetir genéricos ni añadir un archivo de declaración, enlaza tu traductor una vez:

Crea src/i18n-react.ts:

1import { createBetterTranslateReact } from "@better-translate/react";23import { translator } from "./i18n";45export const { BetterTranslateProvider, useTranslations } =6  createBetterTranslateReact(translator);

4. Envolver tu app

Crea o actualiza src/main.tsx para importar el provider local de la app:

tsx

1import React from "react";2import ReactDOM from "react-dom/client";34import { App } from "./app";5import { BetterTranslateProvider } from "./i18n-react";67ReactDOM.createRoot(document.getElementById("root")!).render(8  <React.StrictMode>9    <BetterTranslateProvider>10      <App />11    </BetterTranslateProvider>12  </React.StrictMode>,13);

5. Leer traducciones dentro de un componente

Crea src/header.tsx:

tsx

1import { useTranslations } from "./i18n-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        Español14      </button>15    </header>16  );17}

Cuándo usar solo React

Usa solo @better-translate/core + @better-translate/react cuando:

tu app es una SPA React
tu app es una app Expo
los cambios de locale ocurren en componentes de cliente

Si usas Next.js App Router, conserva este paquete para hooks en cliente y añade el adaptador de Next.js para enrutamiento y helpers en servidor.

Generar archivos de locale automáticamente

En lugar de escribir cada traducción a mano, usa la CLI para extraer cadenas y generar archivos de locale: Guía de la CLI

Continuar con

Ejemplos