Setting Up Localization in your React App
Tags: react, webdev, beginners, tutorial
Published: 2022-09-11 05:18:16

Hey :wave:

If your company(or product) is expanding into multiple geographies, Localization is one of the most important things you will be working on. The sooner you do it, the better! If you do the base setup in the initial stage it will make things easier as your codebase expands.

![Localization Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otp613koohw0nkaljuoa.gif)

So, how do we do it? You'll have to spend few minutes reading this post. :wink: I'll also leave the codesandbox link in the end for you to reference later.

👉 To follow through you'll need basic understanding of [React Context API](https://reactjs.org/docs/context.html).

---

We'll start by creating some translation files. For this demo, we'll support USA, Spain and Russia.


![React Localization - Translation files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e48tbliv33n8rozp17s9.png)

All the strings in our codebase will lie in these files.

Next, we need to setup a Locale context which will be consumed by our app tree. But first let's create a constants file which will store geography related data.

![React Localization - constants](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjy8t831a84sa4gboxoq.png)

We have everything we need to set up our context.

![React Localization - locale context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wopjrqi54f3c7e9c3br.png)

On line 6, we define our initial state which is set to use English(USA).

On line 12, we create a reducer function which will modify the state.

On line 25, we create the provider which will wrap our app tree. I prefer using `useReducer` in context, but the same could have been achieved by `useState`.

Before we end our work on the context, it's good to create a custom hook to consume the context.

![React Localization - custom hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uoewhxnfruxruvcr5rxx.png)

Now, the final piece of the puzzle is to use this context by wrapping our app with it.

![React Localization - context provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpkhhfurqo4ac9ljh01o.png)

We can now refactor our app to use the locale strings. This is how `App.js` looks now.

![React Localization - component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmcojlkfnavzkk4u4e2v.png)

👍 This finishes our setup. Now when we switch the region, action is dispatched from this component which updates the file we're referring for translations.

---

Additionally, we can store some data related to each geography and provide that through the context.

![React Localization - country constants](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6mlc3oyrz60s1bcinq5.png)

I've added phone codes for each geography but you can expand it to keep whatever data you need for example addresses, currencies, etc.

Now, we update context file to add a new key `constants`.

![React Localization - context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pii6wi3kxullpfibcn3h.png)

To use the constant let's add one more string to our translation files.

![React Localization - data strings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9apz3djvsbi4u5xy2hty.png)

Finally, updating our component to use this string.

![React Localization - using constants](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uzt4yl811rlvjn4r48z.png)

💡 I've used this utility function name `interpolate` which is quite useful when working with translations.

Notice how in the `phone_text` translation strings, `phoneCode` lies at different positions for different geographies. Also, not everything can be hard-coded in translations strings. Sometimes you want to show some user data inside these strings. That's exactly where `interpolate` helps.

![React Localization - interpolate utility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r886zw1gca88sgrduv9s.png)

`interpolate` looks for patterns we've set inside in our strings and replaces those with actual data.

We can further extend interpolate to apply different styles to different substrings.

---

That's it! This is how you set up localization. 

🔗 Here's the codesandbox link: [https://codesandbox.io/s/locale-context-qfgkdr](https://codesandbox.io/s/locale-context-qfgkdr)

I hope this post was helpful. Follow for more!

🤝 Connect with me on [LinkedIn](https://linkedin.com/in/thesanjeevsharma) or [Twitter](https://twitter.com/thesnjvsharma).

Cover image by [Kalen Emsley](https://unsplash.com/@kalenemsley).