react-switch-lang

React Multilanguage Higher-Order Component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-switch-lang
701.0.24 years ago5 years agoMinified + gzip package size for react-switch-lang in KB

Readme

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