React Translate JS

A simple and lightweight translation wrapper for React applications.

Installation

npm install react-translate-js
# or
yarn add react-translate-js

Usage

1. First, wrap your app with the TranslationProvider:

import { TranslationProvider } from "react-translate-js";

function App() {
  return (
    <TranslationProvider
      defaultLanguage="en"
      translationPath="/translations.json"
    >
      {/* Your app components */}
    </TranslationProvider>
  );
}

2. Create a translations JSON file (e.g., public/translations.json):

{
  "en": {
    "welcome": "Welcome to our app",
    "hello": "Hello, {name}!"
  },
  "es": {
    "welcome": "Bienvenido a nuestra aplicación",
    "hello": "¡Hola, {name}!"
  }
}

3. Use the TranslateThis component for translations:

import { TranslateThis } from "react-translate-js";

function Welcome() {
  return (
    <div>
      <TranslateThis id="welcome">Welcome to our app</TranslateThis>
      <TranslateThis id="hello" values={{ name: "John" }}>
        Hello, {name}!
      </TranslateThis>
    </div>
  );
}

4. Use the LanguageSelector component to switch languages:

import { LanguageSelector } from "react-translate-js";

function LanguageSwitcher() {
  return <LanguageSelector className="language-select" />;
}

API

TranslationProvider

Props:

• children: React nodes to wrap
• defaultLanguage: Default language code (default: 'en')
• translationPath: Path to translations JSON file (default: '/xyztranslate.json')

TranslateThis

Props:

• children: Default text to show if translation is missing
• id: Translation key (optional, will use generated ID if not provided)
• values: Object with values to replace in translation (e.g., { name: "John" })

LanguageSelector

Props:

• className: CSS class name for styling

License

MIT