Socket
Socket
Sign inDemoInstall

blang

Package Overview
Dependencies
0
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    blang

detect browser's language


Version published
Weekly downloads
21
decreased by-27.59%
Maintainers
1
Install size
97.3 kB
Created
Weekly downloads
 

Readme

Source

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.

Languagecode
Albaniansq
Afrikaansaf
Amharicam
Arabicar
Aragonesean
Armenianhy
Asturianast
Azerbaijaniaz
Banglabn
Basqueeu
Belarusianbe
Bosnianbs
Bretonbr
Bulgarianbg
Catalanca
Central Kurdishckb
Chinese(Chinese) : zh
(Hong Kong) : zh-HK
(Simplified) : zh-CN
(Traditional) : zh-TW
Corsicanco
Croatianhr
Czechcs
Danishda
Dutchnl
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
Esperantoeo
Estonianet
Faroesefo
Filipinofil
Finnishfi
French(French) : fr
(Canada) : fr-CA
(France) : fr-FR
(Switzerland) : fr-CH
Galiciangl
Georgianka
German(German) : de
(Austria) : de-AT
(Germany) : de-DE
(Liechtenstein) : de-LI
(Switzerland) : de-CH
Greekel
Guaranign
Gujaratigu
Hausaha
Hawaiianhaw
Hebrewhe
Hindihi
Hmonghmn
Hungarianhu
Icelandicis
Indonesianid
Interlinguaia
Irishga
Italian(Italian) : it
(Italy) : it-IT
(Switzerland) : it-CH
Javanesejv
Japaneseja
Kannadakn
Kazakhkk
Khmerkm
Koreanko
Kurdishku
Kyrgyzky
Laolo
Latinla
Latvianlv
Lingalaln
Lithuanianlt
Luxembourgishlb
Macedonianmk
Malayms
Malayalamml
Maltesemt
Marathimr
Mongolianmn
Nepaline
Norwegian Bokmålnb
Norwegian Nynorsknn
Occitanoc
Odiaor
Oromoom
Pashtops
Persianfa
Polishpl
Portuguese(Portuguese) : pt
(Brazil) : pt-BR
(Portugal) : pt-PT
Punjabipa
Quechuaqu
Romanian(Romanian) : ro
(Moldova) : mo
Romanshrm
Russianru
Samoansm
Scottish Gaelicgd
Serbiansr
Serbo-Croatiansh
Shonasn
Sindhisd
Sinhalasi
Slovaksk
Sloveniansl
Somaliso
Southern Sothost
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
Sundanesesu
Swahilisw
Swedishsv
Tajiktg
Tamilta
Tatartt
Telugute
Thaith
Tigrinyati
Tonganto
Turkishtr
Turkmentk
Twitw
Ukrainianuk
Uyghurug
Uzbekuz
Urduur
Vietnamesevi
Walloonwa
Welshcy
Western Frisianfy
Xhosaxh
Yiddishyi
Yorubayo
Zuluzu

LICENCE

MIT

Keywords

FAQs

Last updated on 01 Dec 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc