How to make a React Application support more than One language.
Published: 2022-11-18 10:17:45

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl7et8q53vkilr874pfa.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qot4gb17d3hmvv2y0y5.png)


### Create our translation files

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxtm8c44z6aqwbh6x6b7.png)



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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w38swtgjvzumxibuernr.png)



Then we populate our French.ts file with


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1txkw0knaolqlk42vvl.png)


And our English.ts file with

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udc4qeqeavinenaqe21l.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhqxaxzdr1yv6rqrnmlm.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzya36eg9d9yb0vcag98.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7rwmr0h5e7uuvyflqt9.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoyy8088424c0jtukiou.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3wd6jvae2xykg7whsdg.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88dkhcbpao9wrdjaklh9.png)

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

**Our hook**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzeogg1jwe3ppiyrceum.png)


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


### Using our Translation Hook

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhwj4jbcjjpi0xzlh2m6.png)

Let's place the Application between our TranslationProvider.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7c35d0dw6hufbl6pjtp.png)

And boom ! We can then use our hook !


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q0jxvxds4mxkc7wab2d.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju1xk058cim2leh9j9c1.png)


Here's a link to the Github Repo : https://github.com/SeyBoo/translation-hook