@universal-i18n/react v3.0.5 — Now on NPM

Your React app,
every language.

Drop in one component. No JSON files. No t() wrappers. No configuration. Your entire app is instantly available in 100+ languages.

Get Started → ✨ Live Demo View on GitHub
$ npm install @universal-i18n/react ⎘ copy
100+
Languages Supported
<10KB
Bundle Size
0
Dependencies
0
Config Files
Why universal-i18n?

Translation that just works

Stop spending weeks on i18n setup. Ship a global product in minutes.

⚡
Zero Config
No JSON translation files. No t() wrappers. No Next.js i18n config. Just wrap your app and it works.
🔒
Secure by Design
In Next.js, your API key stays server-side. The browser never sees it thanks to built-in proxy route architecture.
🚀
Blazing Fast
Translations are batched, cached in localStorage, and instantly recalled on navigation. Under 10KB total bundle size.
🌍
Framework Agnostic
Works with Next.js App Router, Vite, Create React App, and any React framework without any adapter needed.
🧠
Smart DOM Engine
Uses MutationObserver to detect new text — even content loaded after page mount gets translated automatically.
🎨
Built-in Switcher
A beautiful floating language switcher is included. Or use the useAutoTranslate() hook to build your own.
Quick Start

Two steps to go global

Next.js App Router setup — your API key stays 100% server-side. 


  

  

  

  .env.local

LINGODOTDEV_API_KEY="your_api_key_here"


  

  

  

  app/api/universal-i18n/route.ts

import { createTranslationRoute } from '@universal-i18n/react/server';

// One line. API key stays server-side. Done.
export const POST = createTranslationRoute();


  

  

  

  components/I18nWrapper.tsx

"use client";
import { AutoTranslateProvider, ALL_LOCALES }
  from '@universal-i18n/react';

export function I18nWrapper({ children }) {
  return (
    <AutoTranslateProvider
      sourceLocale="en"
      availableLocales={ALL_LOCALES}
    >
      {children}
    </AutoTranslateProvider>
  );
}

It's really that simple.

Write your React app in English. We translate everything else automatically at runtime — no build step, no dictionary files needed.

✦ Step 1: Get your Lingo.dev API key and save it to `.env.local`.
✦ Step 2: Create the API route — keeps your key safe on the server.
✦ Step 3: Wrap your layout with <AutoTranslateProvider>.
✦ Done. A floating globe button appears. Click it. Your whole app switches language instantly.

Read the full docs →
Global Reach

100+ Languages, out of the box

Pass ALL_LOCALES to unlock every language. Or pick exactly the ones you need.

🇺🇸 English
🇪🇸 Español
🇫🇷 Français
🇩🇪 Deutsch
🇮🇳 हिन्दी
🇯🇵 日本語
🇨🇳 中文
🇧🇷 Português
🇷🇺 Русский
🇰🇷 한국어
🇸🇦 العربية
🇮🇹 Italiano
🇳🇱 Nederlands
🇵🇱 Polski
🇹🇷 Türkçe
🇸🇪 Svenska
🇺🇦 Українська
🇮🇩 Bahasa
🇹🇭 ไทย
🇻🇳 Tiếng Việt
🇧🇩 বাংলা
🇵🇭 Tagalog
🇰🇪 Kiswahili
🇬🇷 Ελληνικά
🇮🇱 עברית
🇮🇷 فارسی
🇮🇳 தமிழ்
🇮🇳 తెలుగు
🇿🇦 Afrikaans
+ 80 more ✨

Ready to go global?

Install in 30 seconds. Ship worldwide today.

npm install @universal-i18n/react ☕ Buy Me a Coffee