React-translang NPM

react-translang 🌍

GitHub package.json version GitHub license npm

A simple yet powerful localization library for React applications, designed to streamline multi-language support using TypeScript.

Features

🌐 Easy setup and integration into existing React projects.
🚀 Lightweight and efficient with minimal dependencies.
🌍 Supports dynamic language switching and automatic language detection.
📚 Seamless translation management through JSON files.
⚛️ Fully typed with TypeScript for enhanced development experience.
🎨 Customizable to fit various project requirements.

Installation

Install react-translang via npm:

npm install react-translang

Usage

1. Setup `TranslangProvider`

Wrap your root component with TranslangProvider and provide the list of supported languages and default language.

import React from 'react';
import ReactDOM from 'react-dom';
import { TranslangProvider } from 'react-translang';

const App = () => {
  const supportedLanguages ={
  en: {
    greeting: 'Hello!',
    farewell: 'Goodbye!',
  },
  zh: {
    greeting: '你好!',
    farewell: '再见!',
  },
  fr: {
    greeting: 'Bonjour!',
    farewell: 'Au revoir!',
  },
};
  const defaultLanguage = 'en';

  return (
    <TranslangProvider languages={supportedLanguages} defaultLanguage={defaultLanguage}>
      <YourAppContent />
    </TranslangProvider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

2. Use `useTranslang` Hook

Use the useTranslang hook in your components to access translation functions (t) and current language (language).

import React from 'react';
import { useTranslang } from 'react-translang';
import { Button } from '@mui/material';

const ExampleComponent = () => {
  const { t, language, setLanguage } = useTranslang();

  const handleLanguageChange = () => {
    setLanguage(language === 'en' ? 'zh' : 'en');
  };

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <Button variant="outlined" onClick={handleLanguageChange}>
        {t('farewell')}
      </Button>
      <p>Current Language: {language}</p>
    </div>
  );
}

export default ExampleComponent;

3. Manage Translations

Place your translation files (en.json, zh.json, fr.json, etc.) in a public directory (public/localize) with key-value pairs representing translations for each supported language.

Example of Translation JSON Files

`en.json`:

{
  "greeting": "Hello!",
  "farewell": "Goodbye!"
}

`zh.json`:

{
  "greeting": "你好!",
  "farewell": "再见!"
}

`fr.json`:

{
  "greeting": "Bonjour!",
  "farewell": "Au revoir!"
}

Types

`TranslangProviderProps`

languages: string[] - Array of supported language codes.
defaultLanguage: string - Default language code.

`TranslangContextType`

language: string - Current selected language.
setLanguage: (language: string) => void - Function to set the current language.
t: (key: string) => string - Function to translate a key into the current language.