React Translate Components

Make your React app accessible to anyone, anywhere. Translate your UI into 200+ languages instantly, right in the browser.

Warning: This library was vibe-coded and has not been extensively tested. Use at your own risk.

Features

• No API keys — Translation runs entirely in the browser using the NLLB model
• No server costs — Zero backend required
• 200+ languages — Powered by Meta's NLLB (No Language Left Behind)
• Works offline — Model is cached after first download (~600MB)
• Drop-in components — Text, Heading, Button, Label, Link

Quick Start

npm install react-translate-components

Wrap your app:

import { TranslationProvider } from 'react-translate-components';

<TranslationProvider
  inputLanguage="en"
  outputLanguage="es"  // es: Spanish, fr: French, de: German, zh: Chinese...
>
  <App />
</TranslationProvider>

Use components:

import { Text, Heading, Button } from 'react-translate-components';

function MyPage() {
  return (
    <div>
      <Heading level={1}>Welcome</Heading>
      <Text>This text translates automatically.</Text>
      <Button>Click Me</Button>
    </div>
  );
}

How It Works

• Write your app in one language. Users see it in theirs. Translation happens in their browser — no server, no API keys.
• Instead of maintaining translation files for every language, write your UI once. Components translate on-the-fly using a local AI model.
• Regular React components go in, translated UI comes out. No i18n configuration, no JSON files, no translation service bills.

Supported Languages

English, Spanish, French, German, Portuguese, Chinese, Japanese, Arabic, Hindi, Swahili, Amharic, Hausa, Yoruba, Oromo, Igbo, and 200+ more via NLLB.

License

MIT