How To Make a Language Switcher in React

What does a language switcher look like?

Why Are Language Switchers needed?

Picture this: You're on a much-anticipated vacation in a vibrant foreign country. You find yourself in a quaint restaurant nestled in a popular tourist area. Excitement fills the air as you prepare to embark on a culinary adventure. The waiter approaches with a smile, but as you open the menu, confusion sets in. It's in a language that you don't understand, and the waiter had assumed it was the language you spoke.

Now begins a rather amusing negotiation between you and the waiter, trying to decipher the menu item by item, attempting to bridge the language gap using gestures and fragments of common words. What should have been a delightful dining experience turns into a comical situation, highlighting the need for clear communication and understanding. This anecdote perfectly encapsulates why language switchers are essential in today's digital content. Just as the restaurant menu failed to cater to your language needs, websites and applications may unintentionally present content in a language that doesn't align with your users’ preferences or proficiency. In such moments, a language switcher becomes their virtual guide, empowering them to navigate the digital landscape in a language that makes sense to them. In the following sections, we'll explore the best practices for implementing them in your React applications. So, let's embark on a journey of linguistic flexibility and user-centric design, ensuring that every user feels at ease and engaged, no matter what language they speak.

Universally understood

The default language of a website or application may not be comprehensible to all users. Incorporating a universally understood UI element for language switching ensures that users, regardless of their language proficiency, can identify and interact with the language switcher effortlessly. A great example of this is a standard language or globe icon.

Flags are not enough

While flags are commonly associated with language selection, they can be misleading or inaccurate. For example, many countries have Spanish speakers who are not from Spain. Relying solely on flags for language indication may exclude or confuse certain user groups. It is advisable to use clear language names or language codes in the language switcher instead. The list of available languages in the language switcher should be expressed in the current language to facilitate user comprehension. However, it is equally important to include language names spelled in their respective native languages. This accommodates users who may recognize their language better when displayed in their native script.

Language names in English, Spanish, French, and German

	English	Spanish	French	German
English	English	Inglés	Anglais	Englisch
Spanish	Spanish	Español	Espagnol	Spanisch
French	French	Francés	Français	Französisch
German	German	Alemán	Allemand	Deutsch

In each cell, the language name in the row language is presented in the language specified by the column. Equipped with this table, you can render the language choices in your switcher in any condition.

Design and implementation

To maximize the encapsulation and decoupling of the component from the rest of the application, it's important to define its input requirements and its responses to user interactions, such as changes in selection and the environment (e.g., changes in the application's current language). This component is designed to be purely functional, meaning it doesn't need to maintain its own state. Instead, the current language is considered part of the environment in which it operates. Internally, the component utilizes a hash that represents the 4x4 language matrix discussed earlier. The component features two key attributes: "currentLanguage" and "onSelect." The "currentLanguage" attribute holds the currently selected language, while the "onSelect" attribute is a callback function used for handling language selection changes. In this particular example, the component relies on Tailwind for styling and Headless UI for certain behavioral aspects. The switcher button displays the current language in its native language, accompanied by the standard international language icon and a chevron icon to indicate that clicking the button reveals additional options. The menu items are wrapped in a Transition element to incorporate visual effects. Within this Transition element, there is code responsible for generating menu items based on the language hash. For the purpose of this demonstration, the wrapper component holds the selected language as state to simulate a complete application. Additionally, it sets a function to update this state, which serves as the callback function for the switcher component. Each item in the dropdown language list is rendered using the language name in the current language and its respective native language.