a React component for dev i18n webpage

Usage no npm install needed!

<script type="module">
  import reactLanguage from '';



This is a React component for build i18n website more effortless. online example


npm install react-language


var ReactLanguage = require('react-language');

/* set currentLanguage, if currentLanguage not set, 
 * use window.navigator.language || window.navigator.userLanguage
 * setLanguage also store the language to localStorage, reopen the web page
 * will getItem from localStorage before get from window.navigator 
 * notice: ReactLanguage converted navigator.language to lower case

/* create method return a ReactComponent, it must and only pass one argument.
 * if argument === true, this component will be the default component,
 * if no other created component match currentLanguge, this content(children) will show.
 * Ther is only one default component in a project.
const En = ReactLanguage.create(true);

// string argument, if argument === currentLanguage, the content(children) will show.
const Ja = ReactLanguage.create('ja');

// function argument, if return true, the content(children) will show. 
const Cn = ReactLanguage.create(function (currentLanguage) { 
    // notice: currentLanguage was converted to lower case
    return currentLanguage.indexOf('zh-') === 0;


    <En tag="div">Hello world.</En>

rendered result:
currentLanguage === 'en-US' => <div><div>Hello world.</div></div>
currentLanguage === 'zh-CN' => <div><span>你好,世界</span></div>
currentLanguage === 'ja' => <div><span>こんにちは世界</span></div>
currentLanguage === 'other language' => <div><div>Hello world.</div></div>


created component only has two props

  • children: content, anything
  • tag: ReactElement type string, like 'div', 'a', 'span'... if children is an Array or a string, render a new ReactElement wrapped by the tag. default value is 'span'.


The MIT License (MIT)