BCP47 picker

A customElement to input one or multiple BCP47 language codes.
GitHub | NPM

Features

Fast search
Force canonicalization but can be disabled
Singular and plural values
Supports scripts and regions, the full BCP47 spec
Able to support thousands of languages
Pluggable, add your own language codes
All CSS classes are configurable

Installation

npm install bcp47-picker --save

Example code:

JavaScript
import 'bcp47-picker'

HTML
<bcp47-picker value="fr,de" multiple></bcp47-picker>

Demo:

Language

Please select a language

Languages

This example uses the ROLV dataset.

Languages

This example uses the ISO 639-3 dataset.

Languages

This example force a canonical.

Creating your own languages index JSON

It is possible to create your own data file. Why would you do this? Within the BCP47 there are multiple ways to arrive at a language. Organizations can have different preferred language codes.

Start the bcp47-picker with a sources getter. See /demo/demo.js
Create a JSON file which contains all the data.

Data format of the JSON

The JSON file MUST be an array with the following structure:

      
[
  ["BCP47-CODE", 
    ["LABEL", 
      [
        "Alternative name 1", 
        "Alternative name 2"
      ]
    ]
  ]
]