react-ultra-language

A lightweight language management library for React + Vite projects. Add new languages by creating a new folder — no configuration changes required.

Installation

npm install react-ultra-language

Setup

Add the Vite plugin to your vite.config.ts:

import { defineConfig } from "vite";
import { ultraLanguage } from "react-ultra-language/vite";

export default defineConfig({
  plugins: [
    ultraLanguage({
      dir: "/src/Language",
      defaultLang: "en",
    }),
  ],
});

Note: dir defaults to /src/Language and defaultLang defaults to en. If these defaults match your project structure, you can omit them entirely:

export default defineConfig({
  plugins: [ultraLanguage()],
});

Folder structure

Inside your Language directory, create one folder per language. Each language folder must contain the same set of .ts files — one per page or section:

src/Language/
├── en/
│   ├── home.ts
│   ├── about.ts
│   └── common.ts
└── ru/
    ├── home.ts
    ├── about.ts
    └── common.ts

Example src/Language/en/home.ts:

export default {
  title: "Welcome",
  subtitle: "This is the home page",
};

Usage

Call useLanguage("<filename>") with the file name (without extension) matching the page you're on:

import { useLanguage } from "react-ultra-language";

function Home() {
  const { ready, t, lang, setLang } = useLanguage("home");

  if (!ready) return <div>Loading...</div>;

  return (
    <div>
      <h1>{t.title}</h1>
      <p>{t.subtitle}</p>

      <button onClick={() => setLang("ru")}>RU</button>
      <button onClick={() => setLang("en")}>EN</button>

      <p>Current language: {lang}</p>
    </div>
  );
}

API

| Return value | Description | | ------------ | --------------------------------------------------------------------------- | | ready | boolean — indicates whether translations for the current page have loaded | | t | Translation object for the requested file, matching its exported shape | | lang | Currently active language code | | setLang | Function used to switch the active language |

Plugin options

| Option | Description | Default | | ------------- | --------------------------------------------------------- | --------------- | | dir | Path to your language directory | /src/Language | | defaultLang | Language code used by default before the user selects one | en |

Adding a new language

1. Create a new folder inside src/Language/, named with the desired language code (e.g. ru/, fr/).
2. Add a .ts file for every page that already exists in the other language folders, using identical file names.
3. No plugin or code changes are required — the new language is picked up automatically.

License

ISC