Quick translation setup with React
Tags: showdev, react, translations
Published: 2019-05-03 13:54:27

---
title: Quick translation setup with React
published: true
description: Quick and very simple way to handle translations in a React application
tags: showdev, react, translations
---

# Introduction

As part of my <a href="https://invoicemaker.xyz" target="_blank">InvoiceMaker</a> application development, I wanted to have a French version of the software. There are a lot of librairies/frameworks available to handle translations in a React application. I figured I don't really need to add more packages to take care of this, and could just code something simple myself. So, here it is!

## What I wanted

I wanted something very simple. I would take a look at the user's browser language. If that language was French (_fr-FR_ or *fr* specifically), I would set the language of my application to French. Else, it would be in English.

I know there are different flavors of French, but for now, handling French from France was just what I needed.

## How?

First, let's create a react application. We won't need much of it, I'll just show how to get started simply. We'll use _create-react-app_:

Run: `create-react-app translations-setup`

Let's now move into your newly created directory and run `npm start`.

### Get the current language

First, we need to know which language the user's browser is using. Modify _App.js_ to add the following code:

```javascript
import React from 'react'
import logo from './logo.svg'
import './App.css'
let frenchCodes = ['fr-FR', 'fr-fr', 'fr']
let language = navigator.language || navigator.userLanguage
if (!frenchCodes.includes(language)) {
	language = 'en-US'
}
// App component below...
```

Here, we define which language we are going to use. We use the _language_ property on the _window.navigator_ object.

I've put the french codes inside an array. Some navigators might return it in lowercase ( I believe some versions of Safari do that ).

Then, if the language is not included inside that array, I know it's not the user's browser is not in French. Therefore, I set the language to US english.

### JSON files for translations

Next, we will create the files where the translations will be stored. Create a folder inside the _src_ folder called _i18n_. Inside that folder, create two JSON files, _en-US.json_ and _fr-FR.json_, and a js file called _index.js_.

The JSON files will hold the translations for their respective languages:

- fr-FR.json

```json
{
	"appTitle": "Modifiez src/App.js et sauvegarder pour recharger.",
	"appLink": "Apprenez React",
	"newPageTitle": "Nouvelle Page",
	"english": "Anglais",
	"french": "Français"
}
```

- en-US.json

```json
{
	"appTitle": "Edit src/App.js and save to reload.",
	"appLink": "Learn React",
	"newPageTitle": "New Page",
	"english": "English",
	"french": "French"
}
```

The keys' names are completely arbitrary. Call them whatever you like, as long as they make sense to you, because this is what we'll be using in our application.

Finally, we will import the translations files inside a unique _index.js_ file:

```javascript
import fr_FR from './fr-FR.json'
import en_US from './en-US.json'
const translations = {
	'fr-FR': fr_FR,
	'en-US': en_US
}

export default translations
```

Great, our translations are now accessible from a single file.

### Context

Now, we need to put it all together. We will need to access the current language in all parts of our application. To do this, we'll use _Context_.

First, let's create our Context. Create a new _LanguageContext.js_ file, and copy the following code inside:

```javascript
import React from 'react'

const LanguageContext = React.createContext()

export default LanguageContext
```

Next, we will wrap the App component inside the Context provider and set a state to hold the language we are using. This state will be passed to the context provider to be used throughout our application. I will also add two buttons to change the current language of our application easily. Your _App.js_ file should look like this:

```javascript
import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'
import NewComponent from './NewComponent'
import translations from './i18n/'
import LanguageContext from './LanguageContext'
let frenchCodes = ['fr-FR', 'fr-fr', 'fr']
let language = navigator.language || navigator.userLanguage
if (!frenchCodes.includes(language)) {
	language = 'en-US'
}

function App() {
	const [lng, setLng] = useState(language)
	return (
		<LanguageContext.Provider value={lng}>
			<div className='App'>
				<header className='App-header'>
					<img src={logo} className='App-logo' alt='logo' />
					<p>{translations[lng]['appTitle']}</p>
					<a
						className='App-link'
						href='https://reactjs.org'
						target='_blank'
						rel='noopener noreferrer'>
						{translations[lng]['appLink']}
					</a>
					<NewComponent />
					<button onClick={() => setLng('fr-FR')}>
						{translations[lng]['french']}
					</button>
					<button onClick={() => setLng('en-US')}>
						{translations[lng]['english']}
					</button>
				</header>
			</div>
		</LanguageContext.Provider>
	)
}

export default App
```

To use our translations here, we import the translations from the _i18n/index.js_. Then, to get the current language, we use the _lng_ variable, stored in the state and used as a value in our context. So, `translations[lng]` will give us the translations of the current language. Then, we add the key we desire to get the appropriate value.

You may have noticed that there is a new component in our _App_. I've added the _NewComponent_ component, and this one uses the useContext hook to get the proper translations:

```javascript
import React, { useContext } from 'react'
import LanguageContext from './LanguageContext'
import translations from './i18n'

const NewComponent = function() {
	const lng = useContext(LanguageContext)
	return (
		<div>
			<h1>{translations[lng]['newPageTitle']}</h1>
		</div>
	)
}

export default NewComponent
```

You'll need to import the LanguageContext and your translations file. By giving useContext the LanguageContext, you will be able to have the current language used in your application everywhere you want.

And there you have a simple and quick way to take care of translations without adding any new packages or librairies to your project.:wink:

You may find the code on <a href="https://github.com/Tagada85/Translations_Setup_React" target="_blank">Github</a>.

Have fun :heart: