Posts i18n-language.js - Simple i18n language with Vanilla JS
Post
Cancel

i18n-language.js - Simple i18n language with Vanilla JS

Thank you for downloads. ^-^

NPM Weekly Downloads 95 (2021.11.28)

i18n-language.js

i18n-language.js is Simple i18n language with Vanilla Javascript

Write by Hyun SHIN (kyaryunha)

Demo Page: http://i18n-language.s3-website.ap-northeast-2.amazonaws.com

NPM Link: https://www.npmjs.com/package/i18n-language

Github Link: https://github.com/kyaryunha/i18n-language.js

Introduce

There are a lot of approaches to internationalisation, but this project offers unique advantages like: followings.

  • Inline translation in HTML documents
  • Lightweight JS implementation in 48 lines
  • Written in pure HTML/CSS/JS so beginners can use it easily
  • When visiting for the first time, the language is set as the browser setting value, and if there is no setting value, English is displayed first
  • When the language is changed, it is stored in the local storage and displayed in the corresponding language when revisiting

Usage:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Example -->
<h4 data-lang="ko">
    바닐라 JS로 하는 간단한 다국어 지원
</h4>
<h4 data-lang="en">
    Simple i18n language with Vanilla JS
</h4>
<h4 data-lang="jp">
    バニラJSで簡単な多言語サポート
</h4>
<!-- How To Change Language -->
<select id="change-language">
    <option value="ko" selected="selected">
        Korean
    </option>
    <option value="en">
        English
    </option>
    <option value="jp">
        Japanese
    </option>
</select> 

JS

Download i18n-language.js and write this code.

1
<script type="text/javascript" src="./i18n-language.js"></script>

If you want use just link,

1
<script type="text/javascript" src="https://unpkg.com/i18n-language@1.0.7/i18n-language.js"></script>

You can see it at NPM, too. https://www.npmjs.com/package/i18n-language

This post is licensed under CC BY 4.0 by the author.