DEV Community


Posted on


How to make a React Application support more than One language.

What are we learning ?

  1. How to Create a Context.
  2. Import and use our Hook.

A bit of context

What's an hook ?

Hooks are functions that let you add into the React State and lifecycle.

What's a context ?

Context provides a way to pass data through the component without having to pass props.

Create our Context.

Image description

We create our context with the createContext function. We pass an Empty Object {} (we don't want to define any default value). Then add an empty Interface (We will use it later to enforce our typing).

Then we create a Function Provider to wrap our application with.

Function Component => Type our function to be a React Component.

Props With Children => Type our application to contain a children props.

Children => Is the react component that will get rendered in our component. In this case our Application.

value={{}} => There we will pass the function/data we want to share to the other components. (The type of value is our TranslationContextActions interface).

Image description

Create our translation files

We are gonna create a folder named Translation with 2 different files within. French and English.

Image description

Once those files created we create another file name language.interface.ts . This file will ensure that both files contain the same Data.

Image description

Then we populate our French.ts file with

Image description

And our English.ts file with

Image description

Now that our data is type safe, and created we can begin the importation.

Import the right Language

To do so, we start by setting a type of the supported Language by our application.

Image description

Then we create a function that get the navigator language of our user. Then, with an if statement, we return the correct value. Without forgetting the default one, English in our case.

Image description

Our function name is self explained and everything got a correct type so we can move on to the importation.

Image description

Nothing special on this function, we import our file based on the given variable. The name also makes sense, and we gave a type to the Function and our Variable. Now let's import this file when the component renders.

Image description

We check if our translationData is undefined cause we don't want to import it twice. Then we call our fonctions and use setTranslationData on the imported file.

Why making so much different function ?

I'm a strong believer that a function should serve one action. If it does more then one thing, slice it.

But why ?

Small well named function are self explanatory which make them easy to understand, to maintain and are way more readable.

Creating a hook

Image description

First we need to type our ContextActions. So let's add an action named translationData with the same type of our useState.

Image description

Then we add the value translationData of our useState to value. We can now access translationData through our application.

Our hook

Image description

We make sure that our hook is placed in a TranslationProvider and we return our translationData

Using our Translation Hook

Image description

Let's place the Application between our TranslationProvider.

Image description

And boom ! We can then use our hook !

Image description

Image description

Here's a link to the Github Repo :

Top comments (0)

12 Rarely Used Javascript APIs You Need

Practical examples of some unique Javascript APIs that beautifully demonstrate a practical use-case.