nico.fyi
    Published on

    How to correctly display a list of languages

    Authors
    • avatar
      Name
      Nico Prananta
      Twitter
      @2co_p

    When displaying a list of languages for user selection, avoid the common mistake of showing language names in the currently selected language.

    For instance, if the current language is English and your website supports English, German, Japanese, and French, it's incorrect to show the list like this:

    Languages

    Select a language

    Instead, show the language names in their native languages. For example:

    Languages

    Select a language

    This way, those who don't speak the current language will still be able to select the language they want.

    To achieve this, you don't need to hard code the language names by hand. Simply use JavaScript's built-in Intl.DisplayNames API. For example:

    const languages = ['en', 'de', 'ja', 'fr'].map((l) => {
      return {
        value: l,
        label: new Intl.DisplayNames([l], { type: 'language' }).of(l),
      }
    })
    

    So neat.


    By the way, I'm making a book about Pull Requests Best Practices. Check it out!