React

@babelize/sdk-react provides React bindings for the core SDK. It handles context, reactivity, and components so translations update automatically when the locale changes.

Setup

Wrap your application with BabelizeProvider:

import { createRoot } from "react-dom/client";
import { babelize } from "@babelize/sdk";
import { BabelizeProvider } from "@babelize/sdk-react";
import lockfile from "virtual:babelize-lockfile";

lockfile && babelize.loadLockfile(lockfile);
babelize.init({
  apiKey: import.meta.env.VITE_BABELIZE_API_KEY,
  locale: "ja",
});

createRoot(document.getElementById("root")!).render(
  <BabelizeProvider>
    <App />
  </BabelizeProvider>,
);

Hooks

useBabelize

Returns a babelize function bound to the current locale. The component re-renders when the locale changes or new translations arrive.

import { useBabelize } from "@babelize/sdk-react";

function Greeting() {
  const babelize = useBabelize();

  return (
    <div>
      <h1>{babelize("Welcome to Babelize")}</h1>
      <p>{babelize("Hello {name}", { name: user.name })}</p>
      <p>{babelize.p("{count} item", "{count} items", items.length)}</p>
    </div>
  );
}

useLocale

Returns the current locale and a setter. Useful for locale switchers.

import { useLocale } from "@babelize/sdk-react";

function LocaleSwitcher() {
  const { locale, setLocale } = useLocale();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="ja">日本語</option>
      <option value="fr">Français</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Pluralization is also available through the same hook:

function ItemList({ items }: { items: string[] }) {
  const babelize = useBabelize();

  return (
    <div>
      <h2>{babelize.p("{count} item", "{count} items", items.length)}</h2>
      {items.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  );
}

Usage with Next.js App Router

The React hooks work in Next.js client components:

"use client";

import { useBabelize, useLocale } from "@babelize/sdk-react";

export function ClientSection() {
  const babelize = useBabelize();

  return (
    <section>
      <h2>{babelize("This section renders on the client")}</h2>
      <p>{babelize("It re-renders when locale changes")}</p>
    </section>
  );
}

For server components, use @babelize/sdk-next instead.

TypeScript

import type { PluralForms } from "@babelize/sdk";

// Return type of useBabelize()
interface BabelizeFn {
  (str: string, vars?: Record<string, string | number>): string;
  p: (
    singular: string,
    plural: string,
    countOrVars: number | Record<string, string | number>,
  ) => string;
  plural: (forms: PluralForms, vars?: Record<string, string | number>) => string;
}