@halliday/react-i18n v2.0.3

React internationalization (i18n) helper

This library provides some simple functions to add multi-language support (internationalization) to your React app.

Easy eaxmple:

import {loadLanguage, config as i18nConfig} from '@halliday/react-i18n';

// define your supported languages
// each language must have a file at "/i18n/{lang}.json"
i18nConfig.supportedLanguages = ['en', 'de'];

const container = document.getElementById('root') as HTMLElement;
const root = ReactDOM.createRoot(container);

// load language file
loadLanguage().then(() => {

    // render app when language is loaded
    root.render(<App />);
});

A language file must look like this:

• /i18n/en.json

{
    "hello": "Hello!",
    "welcome": "Welcome to my app.
}

• /i18n/de.json (German)

{
    "hello": "Hallo!",
    "welcome": "Willkommen in meiner App.
}

Now you can use the translations in your code:

import { L } from "@halliday/react-i18n";

function WelcomeBanner() {
    return <div>
        <h1>{L('hello')}</h1>
        <p>{L('welcome')}</p>
    </div>;
}

Functions

L(key: string)

Loads the value associated with key from the current language file.

loadLanguage(): Promise<void>

Load the current language file from "/i18n/{lang}.json". This function must be called exactly once and before any L call is made.