Quickstart

Add bhasha-js to a React app and ship a translated page in 5 minutes. Pick the mode that fits.

Prerequisites

  • A React 17+ project (Vite, Next.js, Create React App — all work)
  • Node 18+

Step 1 — Install

npm install bhasha-js
# or
yarn add bhasha-js
# or
pnpm add bhasha-js

Step 2 — Pick a mode

Mode 1 · Bundled translations

The fastest path. No backend, no API key.

Create a few JSON files for your translations:

// src/locales/en.json
{
  "hero.title": "Welcome to our store",
  "items_one": "{count} item",
  "items_other": "{count} items"
}
// src/locales/hi.json
{
  "hero.title": "हमारी दुकान में आपका स्वागत है",
  "items_one": "{count} आइटम",
  "items_other": "{count} आइटम"
}

Wrap your app:

import { I18nProvider, useTranslation, LanguageSwitcher } from "bhasha-js";
import en from "./locales/en.json";
import hi from "./locales/hi.json";
import ur from "./locales/ur.json";

export default function App() {
  return (
    <I18nProvider
      preloadedTranslations={{ en, hi, ur }}
      defaultLang="en">
      <LanguageSwitcher />
      <Page />
    </I18nProvider>
  );
}

function Page() {
  const { t, formatCurrency } = useTranslation();
  return (
    <>
      <h1>{t("hero.title")}</h1>
      <p>{t("items", { count: 5 })}</p>
      <p>{formatCurrency(1234567)}</p>
    </>
  );
}

Done. Run your app, click the language switcher, watch Hindi work end-to-end.

Mode 2 · Hosted dashboard

Best for production apps with translators on your team.

  1. Sign up at app.bhashajs.com/register.
  2. Create a project: pick the languages you want to support (e.g. English, Hindi, Bengali, Urdu).
  3. Copy your API key from project settings — it starts with bjs_.
  4. Add translation keys in the dashboard editor, or use the AI Translate button to generate them from English.
  5. Wire up the SDK:
import { I18nProvider, useTranslation } from "bhasha-js";

<I18nProvider
  projectKey="bjs_your_api_key_here"
  defaultLang="en">
  <YourApp />
</I18nProvider>

The SDK fetches translations from https://api.bhashajs.com using the x-api-key header. Cached in memory after first load — language switching is instant.

Mode 3 · Self-hosted

See Self-hosting guide.

Step 3 — Add a language switcher

<LanguageSwitcher />                              // dropdown
<LanguageSwitcher style="floating" position="top-right" />

Or build your own:

function MySwitcher() {
  const { currentLang, setLang, supportedLangs } = useTranslation();
  return (
    <select value={currentLang} onChange={(e) => setLang(e.target.value)}>
      {supportedLangs.map((l) => <option key={l} value={l}>{l}</option>)}
    </select>
  );
}

Step 4 — Format numbers + currency

const { formatNumber, formatCurrency, formatDate } = useTranslation();

formatNumber(1234567);                           // → "12,34,567" in Hindi
formatNumber(1500000, { compact: true });         // → "15 लाख"
formatNumber(123, { useNativeDigits: true });    // → "१२३"

formatCurrency(1234567);                         // → "₹12,34,567.00" in Hindi
formatCurrency(1500, { currency: "USD" });       // → "$1,500.00"

formatDate(new Date());                            // → "26 Apr 2026"
formatDate(new Date(), { preset: "long" });         // → "26 अप्रैल 2026"

Step 5 — Pluralization

Suffix your keys with _one and _other. The SDK picks the right one based on the language's CLDR rules.

// In your translations:
{
  "items_count_one": "{count} आइटम",
  "items_count_other": "{count} आइटम"
}

// In your component:
t("items_count", { count: 0 })   // Hindi → uses _one (0 is singular!)
t("items_count", { count: 0 })   // English → uses _other (0 is plural)

Next steps