react-switch-lang

React Multi-language Higher Order Component with cookie support.

Installation

npm install react-switch-lang --save

Usage

en.json

{
  "home": {
    "title": "Homepage"
  },
  "hello": "Hello {name}!",
  "fallback": "Fallback message"
}

th.json

{
  "home": {
    "title": "หน้าแรก"
  },
  "hello": "สวัสดี {name}!"
}

SomeComponent.js

import React from 'react';
import PropTypes from 'prop-types';

// Translation Higher Order Component
import {
  setTranslations,
  setDefaultLanguage,
  setLanguageCookie,
  setLanguage,
  translate,
} from 'react-switch-lang';
import en from 'en.json';
import th from 'th.json';

// Do this two lines only when setting up the application
setTranslations({ en, th });
setDefaultLanguage('en');

// If you want to remember selected language
setLanguageCookie();

class SomeComponent extends React.Component {
  handleSetLanguage = (key) => () => {
    setLanguage(key);
  };

  render() {
    const { t } = this.props;
    return (
      <div>
        {t('home.title')}
        {t('home.title', null, 'th')}
        {t('hello', { name: 'World' })}
        {t('fallback')}

        <button type="button" onClick={this.handleSetLanguage('th')}>
          Switch language
        </button>
      </div>
    )
  }
}

SomeComponent.propTypes = {
  t: PropTypes.func.isRequired,
};

export default translate(SomeComponent);

Injected Method

If using the Higher Order Component translate(SomeComponent)

t(path, params, lang)

Get text function, will return the translated string

Params | Type | Description ------ | ------ | ------------------------------------------------------------------------------------ path | string | translation path that identifies the text params | object | (optional) {'param': 'value', ...} each param will be set on the string in its correct location lang | string | (optional) force select language with translation key, in this example 'en' or 'th'

Exported Methods

setDefaultTranslations(translations)

Sets the translations

Params | Type | Description ------------ | ------ | ---------------------------- translations | object | { "en": { "hello": "Hello" } }

setTranslations(translations)

Same as setDefaultTranslations, but this will update all components using translations

Params | Type | Description ------------ | ------ | ---------------------------- translations | object | { "en": { "hello": "Hello" } }

setDefaultLanguage(key)

Set the default application language, when current language does not have translation text method t() will fallback with this default language Note: this method will set current language but not update components

Params | Type | Description ------ | ------ | --------------------------------------------- key | string | translation key, in this example 'en' or 'th'

setLanguage(key)

Set current language, this will update all components using translations

Params | Type | Description ------ | ------ | --------------------------------------------- key | string | translation key, in this example 'en' or 'th'

setLanguageCookie(name, option, reqCookie)

Set the language cookie name, will setLanguage form this cookie and store language key back to cookie when call setLanguage

Params | Type | Default | Description ------ | ------ | ------ | --------------------------------------------- name | string | 'language' | (optional) name of cookie to store in browser option | object | { path: '/', maxAge: 157680000 } | (optional) cookie option base on "universal-cookie", default age is 5 years reqCookie | string | undefined | (optional) the express cookie header (req.headers.cookie), this is required if you use server-side rendering such as Next.js

getLanguages()

Return all translations key. Example: ['en', 'th']

getDefaultLanguage()

Return the default fallback language

getLanguage()

Return the current selected language

t(key, params, lang)

Same as t() method above