- Published on
How to correctly display a list of languages
- Authors
- Name
- Nico Prananta
- Follow me: @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!