react

@fanee/react

React bindings for Fanee.

Installation

npm install @fanee/core @fanee/react

Quick Start

With Vite:

npm install @fanee/vite

vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { fanee } from "@fanee/vite";

export default defineConfig({
	plugins: [
		fanee({
			bundlePath: "./i18n", // Change to your OTB bundle path
		}),
		react(),
	],
});

import { i18n } from "@fanee/core";
import { useT, useLocale, useSetLocale } from "@fanee/react";
import { resources } from "virtual:fanee";

i18n.config({
	defaultLocale: "en",
	currentLocale: "en",
	resources,
});

function App() {
	const t = useT();
	const locale = useLocale();
	const setLocale = useSetLocale();

	return (
		<div>
			<p>{t("hello", { name: "World" })}</p>
			<p>Current locale: {locale}</p>
			<button onClick={() => setLocale(locale === "en" ? "fr" : "en")}>
				Switch locale
			</button>
		</div>
	);
}

API

FaneeProvider

Wraps your app and exposes a FaneeRuntime instance to descendant hooks.

useT(context?)

Returns a bound translate function. Re-renders when the locale, namespace, or resources change.

useLocale()

Returns the active locale.

useSetLocale()

Returns a function to update the active locale.

useFanee()

Returns { runtime, locale } for direct access to the runtime instance.

License

MIT