React

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

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

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

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

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}