Beyond React — the BhashaStore engine

The React components are one binding over a small, framework-agnostic engine called BhashaStore. It holds the active language + register, exposes t() and the formatters, and lets you subscribe() to changes. Import it from bhasha-js/vanilla — no React in the dependency graph.

import { createBhashaStore } from "bhasha-js/vanilla";

const store = await createBhashaStore({
  projectKey: "bjs_...",        // or preloadedTranslations: { ... }
  defaultLang: "en",
});

store.subscribe(() => render());
store.t("hero.title");                 // translated string
store.formatCurrency(1234567);          // "₹12,34,567.00"
await store.setLang("hi");              // switches + notifies subscribers

Vanilla JS

const store = await createBhashaStore({ projectKey: "bjs_..." });

function render() {
  document.querySelector("h1").textContent = store.t("hero.title");
}
store.subscribe(render);
render();

document.querySelector("#hindi").addEventListener("click", () => store.setLang("hi"));

Vue 3

Wrap the store in a composable so templates re-render on change:

// useBhasha.ts
import { ref, onUnmounted } from "vue";
import { BhashaStore } from "bhasha-js/vanilla";

const store = new BhashaStore({ projectKey: "bjs_..." });
store.init();

export function useBhasha() {
  const state = ref(store.getState());
  const off = store.subscribe((s) => (state.value = { ...s }));
  onUnmounted(off);
  return { state, t: store.t.bind(store), setLang: store.setLang.bind(store) };
}

Svelte

The store's subscribe shape is one adapter away from a Svelte store:

// bhasha.ts
import { BhashaStore } from "bhasha-js/vanilla";

const store = new BhashaStore({ projectKey: "bjs_..." });
store.init();

// a Svelte-compatible readable: subscribe(fn) → unsubscribe
export const bhasha = {
  subscribe(fn) { fn(store.getState()); return store.subscribe(fn); },
};
export { store };
// in a component:  $bhasha.lang  ·  store.t("hero.title")  ·  store.setLang("hi")

React

In React, just use the built-in <I18nProvider> + useTranslation() — they're a thin binding over this same engine.

What you get everywhere

Every binding inherits the full South-Asian feature set — lakh/crore numbers, native digits, CLDR plurals, RTL, script-aware fonts, register variants, and culturally-aware fallback chains — because they all live in the engine, not the React layer.