Building a Multi-Language Support application with React Context API

Introduction
Understanding React Context API
Creating Multi language support with Context API
Conclusion

Introduction

React Context API provides an elegant way to share state and functionality across components without having to explicitly pass props through each level of the component tree. This makes it ideal for building applications that support multiple languages since we need a centralized way to manage the selected language and make it available globally.

In this post, we will build a React app that supports English and German languages using React Context API. We will create a LanguageContext to manage the selected language and provide methods to change it.

Understanding React Context API

In React, you usually pass data from parent to child components as props. But this can become cumbersome for deeply nested components where you have to pass props through multiple levels. React Context API provides a way to share data like this globally without having to pass props down manually at every level. It uses the Context object to expose data to all components within the provider tree.

At it's core, React Context provides two main things -

Context - An object that stores and transmits data through the component tree. It allows components to subscribe to changes and receive the latest context value.
Provider - A component that makes the context available to the rest of the component tree. It should wrap the components that need access to the context.

I will be demonstrating how to create a Multiple language functionality using Context API in React.

Creating Multi language support with Context API

For this demo, I will assume that you already have an existing React application. If you don't, you can create one using create-react-app. In this example, we'll create a simple multi-language functionality where users can switch between English and German. We'll use React Context API to manage the language state and provide translations to all components in the application.

Let's start by creating a LanguageContext.jsx file:

import React, { createContext, useState, useContext } from 'react';

const LanguageContext = createContext();

export const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');

  const translations = {
    en: {
      greeting: 'Hello!',
      farewell: 'Goodbye!'
    },
    de: {
        greeting: 'Hallo!',
        farewell: 'Auf Wiedersehen!'
    }
  };

  const translate = (key) => translations[language][key] || key;

  return (
    <LanguageContext.Provider value={{ language, setLanguage, translate }}>
      {children}
    </LanguageContext.Provider>
  );
};

export const useLanguage = () => {
  const context = useContext(LanguageContext);
  if (!context) {
    throw new Error('useLanguage must be used within a LanguageProvider');
  }
  return context;
};

In the file above, we are creating a LanguageContext using React's createContext hook. This context will hold the selected language state and methods to update it.

We are also creating a LanguageProvider component that wraps our app and makes the context available. This component initializes the language state to en and defines a translate method to return the correct translation based on language, setTranslation method to update language, and the language value itself.

finally, We export a useLanguage hook to consume the context in other components. This allows us to access the language state and methods defined in the provider.

Now let's integrate this context in our App component:

// App.jsx
import React from 'react';
import { LanguageProvider } from './LanguageContext';
import Header from './Header';
import MainContent from './MainContent'; 

function App() {
  return (
    <LanguageProvider>
      <div className="App">
        <Header />
        <MainContent />
      </div>
    </LanguageProvider>
  );
}

export default App;

// Header.jsx
import React from 'react';
import { useLanguage } from './LanguageContext';

function Header() {
  const { language, setLanguage } = useLanguage();

  return (
    <header>
      <h1>{language === 'en' ? 'Language Switcher' : 'Sprachumschalter'}</h1>
      <button onClick={() => setLanguage('en')}>English</button>
      <button onClick={() => setLanguage('de')}>Deutsch</button>
    </header>
  );
}

export default Header;

// MainContent.js
import React from 'react';
import { useLanguage } from './LanguageContext';

function MainContent() {
  const { translate } = useLanguage();

  return (
    <div>
      <p>{translate('greeting')}</p>
      <p>{translate('farewell')}</p>
    </div>
  );
}

export default MainContent;

In the Header.js and MainContent.js files, we use the useLanguage hook to access the language state and setLanguage function provided by the LanguageProvider. We also use the translate function to display translated text based on the current language.

Conclusion

React Context API simplifies the implementation of multi-language support in React applications. By managing the language state and providing translations to all components, it streamlines the development process and enhances user experience. With the example provided in this blog post, you can easily integrate multi-language support into your React projects, making them accessible to a wider audience.

Table of Contents

Introduction

Understanding React Context API

Creating Multi language support with Context API

Conclusion