Detect browser's default language.
Blang.js is light-weight and none-dependency language detect javascript library. Blang.js is able to detecting user's set default language on Web-browser.
import lang from "blang";
lang.is.en(); // if English, return 'true'
lang.is.fr(); // if not French, return false
lang.is.gb(); // if not German, return false
lang.is.es(); // if not Spanish, return false
lang.is.ru(); // if not Russian, return false
// ... goes on
! Working only web-browser. The reason why using
navigator
object inside.
// npm
npm i blang
// yarn
yarn add blang
// cdn
<script src="https://unpkg.com/blang/dist/blang.min.js"></script>
ES-2015 and so (Babel)
import lang from "blang";
lang.is.en(); // call library
CommonJS
const lang = require('blang');
lang.is.en(); // call library
Import library with <script>
tag
<!-- import library from script tag -->
<script src="/path/to/dist/blang.min.js"></script>
<!-- OR from CDN -->
<script src="https://unpkg.com/blang/dist/blang.min.js"></script>
<script>
// you can access library with 'blang' object
blang.is.en(); // call library
</script>
is
object is used to compare a browser's language.
Quick example snippet.
If user's browser-language has set as English, return true
. Otherwise return false
.
/* detect english of not */
import lang from "blang";
// true if, en-us, en-gp, en-in, en-ca, en-nz ...*
lang.is.en();
Currently detectable 108 languages.
// if English, return 'true'
lang.is.en(); // English
lang.is.fr(); // French
lang.is.ru(); // Russian
lang.is.he(); // Hebrew
lang.is.zh(); // Chinese
lang.is.hi(); // Hindi
// .. goes on
Some languages have multiple regions like country in one language.
For example English have en
, en-au
, en-ca
, en-in
, en-za
, en-gb
, en-nz
, en-us
They each indicate
English
,Australia
,Canada
,India
,South Africa
,United Kingdom
,New Zealand
, andUnited States
In this case, you can define a regions with argument.
/* detect one-region in English :String */
lang.is.en("gb"); // if 'en-gb'
/* multiple regions in English :Array */
lang.is.en(['us', 'ca']); // if 'en', 'en-us' and 'en-ca'
lang.is.en(['au', 'nz']); // // if 'en', 'en-au' and 'en-nz'
Languages are available in 'English', 'Chinese', 'French', 'German', 'Italian', 'Portuguese', 'Spanish'
plural
method is used detect a languages.
Below snippet return boolean, if browser's language has setting such as English
, French
, Spanish
or German
.
import lang from "blang";
// English, French, Spanish, German
lang.plural(['en', 'fr', 'es', 'de']);
exact
method is detect a languages.
Almost same as plural
method but, this is able to specify a lang-code with country. Like, en-us
, de-ch
.
import lang from "blang";
/*
* (United States)(English) : en-us
* (United States)(Spanish) : es-us
* (Mexico)(Spanish) : es-mx
* (Canada)(English) : en-ca
* (Canada)(French) : fr-ca
*/
lang.exact(['en-us', 'es-us', 'es-mx', 'en-ca', 'fr-ca']);
detect
method is to return browser's setting language as string.
import lang from "blang";
lang.detect();
// e.x.p: fr-ca, en-us, en, zh-tw ... etc
Blang.js is very useful for a case of switching rendering components by language with Virtual-DOM libs ( React.js, Vue.js, and so.) .
<template>
<div>
<!-- if English to be rendering -->
<div v-if="lang().en()">
<h2> Your expected it's English π </h2>
</div>
<!-- if setting as 'en-ca' -->
<div v-if="lang().en('ca')">
<h2> π¨π¦ π </h2>
</div>
<!-- if setting as 'en-au', 'en-nz' or 'en' -->
<div v-if="lang().en(['au', 'nz'])">
<h2> π¦πΊ π³πΏ π </h2>
</div>
</div>
</template>
<script>
import lang from "blang";
export default {
name: 'HelloWorld',
methods : {
lang() { return lang.is; },
plural(arg) { return lang.plural(arg) }
}
}
</script>
This example with React.js. using below's snippet react-extras.
import { Choose } from "react-extras";
import language from "blang";
//...
render() {
const lang = language.is;
return(
<div>
γ{/* Choose */}
<Choose>
/* rendering if set as English */
<Choose.When condition={lang.en()}>
<h1> Hello! </h1>
</Choose.When>
/* rendering if set as Chinise */
<Choose.When condition={lang.zh()}>
<h1> δ½ ε₯½! </h1>
</Choose.When>
/* rendering if set as Japanese */
<Choose.When condition={lang.ja()}>
<h1> γγγ«γ‘γ―οΌ </h1>
</Choose.When>
<Choose.Otherwise>
<h1> Somthing else. </h1>
</Choose.Otherwise>
</Choose>
</div>
)
} // ! render()
You can easily switch a request by language.
import axios from "axios";
import lang from "blang";
let url;
if(lang.is.ja()) {
// if japan
url = '/req/for/japanese';
} else {
// if not japan
url = '/req/for/english';
}
axios.get(url)
.then((val) => {
// diffrent request by language
});
You can easily switch a locale (date-formats) by language.
var m = moment;
// if japan to be 'japan', else 'english'
blang.is.ja() === true
? m.locale('ja') // japan
: m.locale('en'); // english
moment(new Date()).format('LLLL');
// e.x.p : if ja : 2018εΉ΄7ζ8ζ₯ ζ₯ζζ₯ 17:30
// e.x.p : else : Sunday, July 8, 2018 5:30 PM
Those list of data are from Google-Chrome.
Language | code |
---|---|
Albanian | sq |
Afrikaans | af |
Amharic | am |
Arabic | ar |
Aragonese | an |
Armenian | hy |
Asturian | ast |
Azerbaijani | az |
Bangla | bn |
Basque | eu |
Belarusian | be |
Bosnian | bs |
Breton | br |
Bulgarian | bg |
Catalan | ca |
Central Kurdish | ckb |
Chinese | (Chinese) : zh (Hong Kong) : zh-HK (Simplified) : zh-CN (Traditional) : zh-TW |
Corsican | co |
Croatian | hr |
Czech | cs |
Danish | da |
Dutch | nl |
English | (English) : en (Australia) : en-AU (Canada) : en-CA (India) : en-IN (New Zealand) : en-NZ (South Africa) : en-ZA (United Kingdom) : en-GB (United States) : en-US |
Esperanto | eo |
Estonian | et |
Faroese | fo |
Filipino | fil |
Finnish | fi |
French | (French) : fr (Canada) : fr-CA (France) : fr-FR (Switzerland) : fr-CH |
Galician | gl |
Georgian | ka |
German | (German) : de (Austria) : de-AT (Germany) : de-DE (Liechtenstein) : de-LI (Switzerland) : de-CH |
Greek | el |
Guarani | gn |
Gujarati | gu |
Hausa | ha |
Hawaiian | haw |
Hebrew | he |
Hindi | hi |
Hmong | hmn |
Hungarian | hu |
Icelandic | is |
Indonesian | id |
Interlingua | ia |
Irish | ga |
Italian | (Italian) : it (Italy) : it-IT (Switzerland) : it-CH |
Javanese | jv |
Japanese | ja |
Kannada | kn |
Kazakh | kk |
Khmer | km |
Korean | ko |
Kurdish | ku |
Kyrgyz | ky |
Lao | lo |
Latin | la |
Latvian | lv |
Lingala | ln |
Lithuanian | lt |
Luxembourgish | lb |
Macedonian | mk |
Malay | ms |
Malayalam | ml |
Maltese | mt |
Marathi | mr |
Mongolian | mn |
Nepali | ne |
Norwegian BokmΓ₯l | nb |
Norwegian Nynorsk | nn |
Occitan | oc |
Odia | or |
Oromo | om |
Pashto | ps |
Persian | fa |
Polish | pl |
Portuguese | (Portuguese) : pt (Brazil) : pt-BR (Portugal) : pt-PT |
Punjabi | pa |
Quechua | qu |
Romanian | (Romanian) : ro (Moldova) : mo |
Romansh | rm |
Russian | ru |
Samoan | sm |
Scottish Gaelic | gd |
Serbian | sr |
Serbo-Croatian | sh |
Shona | sn |
Sindhi | sd |
Sinhala | si |
Slovak | sk |
Slovenian | sl |
Somali | so |
Southern Sotho | st |
Spanish | (Spanish) : es (Argentina) : es-AR (Chile) : es-CL (Colombia) : es-CO (Costa Rica) : es-CR (Honduras) : es-HN (Latin America) : es-419 (Mexico) : es-MX (Peru) : es-PE (Spain) : es-ES (United States) : es-US (Uruguay) : es-UY (Venezuela) : es-VE |
Sundanese | su |
Swahili | sw |
Swedish | sv |
Tajik | tg |
Tamil | ta |
Tatar | tt |
Telugu | te |
Thai | th |
Tigrinya | ti |
Tongan | to |
Turkish | tr |
Turkmen | tk |
Twi | tw |
Ukrainian | uk |
Uyghur | ug |
Uzbek | uz |
Urdu | ur |
Vietnamese | vi |
Walloon | wa |
Welsh | cy |
Western Frisian | fy |
Xhosa | xh |
Yiddish | yi |
Yoruba | yo |
Zulu | zu |
MIT