Skip to content

cupof-github/blang.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

33 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Blang.js

Detect browser's default language.

logo

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.

Installation

// npm
npm i blang
// yarn
yarn add blang
// cdn
<script src="https://unpkg.com/blang/dist/blang.min.js"></script>

Import library

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.languageCode() : Boolean

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.

List of available 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

multiple regions

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, and United 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(array) : Boolean

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(array) : Boolean

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() : String

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

Practical usage

Blang.js is very useful for a case of switching rendering components by language with Virtual-DOM libs ( React.js, Vue.js, and so.) .

vue.js case ( vuex )

<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>

react.js case

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()

axios case

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
     });

moment.js case

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

Detectable-languages

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

LICENCE

MIT

About

Detect browser's default language.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published