1. Pull Request Best Practices
    🥸 Btw, have you explored my latest book?
    Visit
nico.fyi
Published on

How to correctly display a list of languages

Many got this wrong.

Authors

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!

Hey, I use cookies to see how you use the website and make it better. Can you cool with that and let me use 'em?

Notification Pull Request Best Practices🥸 Btw, have you explored my latest book?Visit