Wrapper of react-i18next ( https://react.i18next.com/ )

Configuration

let locales = [
    {
        key: 'en_US', // lang key
        name: 'English', // lang name
        locale: {
            // name space
            ns1: {
                welcome: 'Welcome to i18next - {{idx}}',
            }
        }
    },
    {
        key: 'fr_FR',
        name: 'Français',
        locale: {
            ns1: {
                welcome: 'Bienvenue sur i18next - {{idx}}',
            }
        }
    }
];
// default language and locales name space
let defaultSettings = { lng: 'en_US', ns: 'ns1' };
let options = {
    newI18n: false, // Create a new react-i18next instance or not. Usually set to true in npm package
    auto: true, // Automatically detect the current language that should be used or not
    store: { // How to store detected languages or user-set languages
        key: 'lng', // store key
        driver: 'origin' // store driver. refer to nbrc-store drivers. Set to empty string, will not be stored
    },
    detect: {
        /**
         * Whether to detect parameters in query string. 
         * example： https://example.com/?lng=fr_FR 
         * if auto is true, will automatically change language to fr_FR
         * Priority higher than 'browser'
         */
        qs: true, 
        /**
         * Whether to detect the current browser UI language
         * if auto is true and user has not set any language, the current browser UI language will be used
         * Priority lower than 'qs'
         */
        browser: true
    },
    onChanged: (lng) => {// callback for langage changes
        // change all other components UI language here...
	console.log('language changed to',lng)
    }
};

Create Instance

import i18n from 'nbrc-react-i18n';

let lang = i18n.createInstance(locales, defaultSettings, options);

Examples

// languages list
console.log( lang.list );
// Output:
// [
//     {
//         "key": "en_US",
//         "name": "English"
//     },
//     {
//         "key": "fr_FR",
//         "name": "Français"
//     }
// ]

// change language to fr_FR
lang.change('fr_FR')

// translate a key
console.log( lang.trans('welcome', { idx: 888 }) )
// or use i18next instance directly to translate
lang.i18n.t('welcome', { idx: 888 })
// Output:
// Bienvenue sur i18next - 888

// Supported language keys
console.log( lang.keys() )
// Output:
// [
//     "en_US",
//     "fr_FR"
// ]

// Current Language
console.log( lang.key() )
// Output:
// fr_FR

// Language supported or not
console.log( lang.isSupported('fr_FR') );
// Output:
// true

React Component

import { Trans, useTranslation } from 'react-i18next';

function Default(props) {

    const { t } = useTranslation();

    function change(lng) {
        lang.change(lng).then((lng) => {
            console.log('language changed:',lng);
        })
    }

    return <div className={Style.wrapper}>
        {/* <span>t:{t('welcome')}</span> */}
        <br />
        <span>Trans:<Trans values={{ idx: 1 }}>welcome</Trans></span>
        <br />
        <Space>
            <Button onClick={() => { change('en_US') }}>en</Button>
            <Button onClick={() => { change('fr_FR') }}>fr</Button>
        </Space>
    </div>
}

export default Default