
The study shows that 72% of consumers are more likely to stay on a website if it is been translated! 
Moreover, 55% of consumers said they only buy from websites which are in their native language!

Internationalization of your project is critical for success, if you plan to go to market in a different country.

Full [list of localization libraries and tools on Github](https://github.com/jpomykala/awesome-i18n). Feel free to [add your resources](https://github.com/jpomykala/awesome-i18n) as a pull requests or just [create a new issue](https://github.com/jpomykala/awesome-i18n/issues/new).

## Top React localization libraries

See my list of the best React libraries which I gathered. I focus mainly on ReactJS, React Native and Expo libraries.

### 1. [react-native-localize](https://github.com/zoontek/react-native-localize)

This library is a toolbox for your React Native app localization!

![Screenshot 2021-02-13 at 16.48.01](https://dev-to-uploads.s3.amazonaws.com/i/u9clovbbygyynepbpdnu.png)


### 2. [FormatJS](https://formatjs.io)

Internationalize your web apps with react-intl library (now FormatJS). Check also FormatJS CLI for message extraction below!

![formatjs library](https://dev-to-uploads.s3.amazonaws.com/i/vuixvedahnulx42ip99l.png)

#### See also
- [Integration guide: translations hosting](/docs/integrations/format-js/) - check how to use SimpleLocalize with FormatJS library
- [Extract i18n keys from FormatJS project](/docs/cli/i18n-keys-extraction/) - learn more about message extraction done by SimpleLocalize CLI
- [Blog post: FormatJS and React application localization](/blog/posts/formatjs-reactjs-internationalization/) - blog post about FormatJS translation management with SimpleLocalize 
- [Github repository: example project](https://github.com/simplelocalize/simplelocalize-react-intl) - example project code with configured FormatJS
- [Live demo](https://react-intl.simplelocalize.io) - see live demo of FormatJS (react-intl) and SimpleLocalize integration


### 3. [FormatJS CLI](https://formatjs.io/docs/tooling/cli/)

Extract messages from project with FormatJS library. Learn [how to upload extracted translation messages to SimpleLocalize](/docs/integrations/format-js-cli).

![formatjs cli](https://dev-to-uploads.s3.amazonaws.com/i/p3gu7b64mfg6bpa4s7md.png)


### 4. [react-i18nify](https://github.com/sealninja/react-i18nify)

'React-i18nify' is a simple group of translation and localization components and helpers for your React application.

![react-i18nify](https://dev-to-uploads.s3.amazonaws.com/i/5aboslv2dpx5z3pz444r.png)


### 5. [react-persian](https://github.com/evandhq/react-persian)

Are you developing a application for a persian audience? Check 'react-persian' library. This is a group of React components for Persian localization.

![react-persion](https://dev-to-uploads.s3.amazonaws.com/i/x7rs5zd63u3nutegejf1.png)


### 6. [react-littera](https://github.com/Assembless/react-littera)

Littera was created to make maintaining and managing translations easier. It allows placing translations right beside your component as well as storing translations globally. Littera's structure was inspired by react-jss.

![react littera for managing translations](/blog/react-littera.png)

```shell
npm install --save @assembless/react-littera
```

### 7. [react-i18next](https://react.i18next.com/)

One of the most React localization libraries. Commonly used in React localization. It can be used with React Web and React Native.
i18next was primary created for React only. The community gathered among the library created integrations for other frontend frameworks such as AngularJS, Vue.js and more.

#### See also
- [Integration guide: translations hosting](/docs/integrations/i18next/) - check how to use SimpleLocalize with i18next library
- [Extract i18n keys from i18next library](/docs/cli/i18n-keys-extraction/) - use SimpleLocalize CLI to find translation keys used in the project
- [Blog post: i18next in 3 steps](/blog/posts/i18next-reactjs-localization/) - blog post about integrating SimpleLocalize with i18next
- [Github repository: example project](https://github.com/simplelocalize/simplelocalize-i18next) - example project with configured i18next with **'http-backed'** and **'loadpath'**
- [Live demo](https://i18next.simplelocalize.io) - see live demo of i18next with configured http-backend and 'loadpath'. 

![react localization](/blog/i18next-simplelocalize.png)

### 8. [bloodyowl/react-translate](https://github.com/bloodyowl/react-translate)

React utilities for simple i18n handling. Library is a bit outdated, last commit was in 2019, and last release is dated to end of 2016. 
**If some reason you didn't like FormatJS then the library is worth checking.**

![react-translate](https://dev-to-uploads.s3.amazonaws.com/i/0vleumn4cn3owrx85z4l.png)


### 9. [next-translate](https://github.com/vinissimus/next-translate)

Thanks to the community finally we have an easy and simple i18n support for NextJS.
In the NextJS version 10, the developers realised how important is i18n for SEO. So they decided to introduce internationalized routing!
We can read it on the blog that [internationalized routing is now available](https://nextjs.org/blog/next-10#internationalized-routing) in NextJS 10.


![next-translate](https://dev-to-uploads.s3.amazonaws.com/i/utqt31b1lfjqhee1sqjl.png)


### 10. [react-translated](https://github.com/amsul/react-translated)

A dead simple way to add complex translations in a React project

![react-translated](https://dev-to-uploads.s3.amazonaws.com/i/f7j04hewvzd5p7uqtutx.png)


### 11. [React-intl hooks](https://github.com/CreateThrive/react-intl-hooks)


React-intl-hooks is a small and fast library that you can use to replace FormatJS components.
It provides a `t` function, which works like the `t` function in i18next library.

```tsx
const t = useFormatMessage();
t({ id: 'learn-react', defaultMessage: 'Learn React' })
```

![react-intl hooks](https://dev-to-uploads.s3.amazonaws.com/i/0eo7vujvx4zab2fmu9xc.png)

```shell
npm install --save react-intl-hooks
```

### 13. [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n)

An opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.

![typesafe-i18n example demo](/blog/typesafe-i18n-demo.gif)

```shell
npm install --save typesafe-i18n
```


### 12. [SimpleLocalize](/register/)

SimpleLocalize allows you to upload and manage translation keys in the cloud. Free account allows you to host up to 
100 translation keys. You can [create your account here](/register/).

#### 1. Upload translations

![translations cli upload](https://dev-to-uploads.s3.amazonaws.com/i/t2ehjetlw3tkuifl7izi.gif)

#### 2. Translate in editor

![simplelocalize editor - change-translation](https://dev-to-uploads.s3.amazonaws.com/i/rxm1q0vgfm428x13eftz.gif)

You can use DeepL or Google Translate to translate texts automatically.

#### 3. Download translations

![simplelocalize cli download](https://dev-to-uploads.s3.amazonaws.com/i/irpa9scrovwlkni18slt.gif)

#### 4. Localization hosting

Check also [translation hosting](/docs/general/translation-hosting/) option to keep your localization files in the cloud.

![fetching translations from backend](/blog/localization-files-hosting.png)

Resources:
- [i18next: integration guide](/docs/integrations/i18next/)
- [FormatJS: integration guide](/docs/integrations/format-js/)
- [FormatJS CLI: integration guide](/docs/integrations/format-js-cli/)
- [Docs: translation hosting](/docs/general/translation-hosting/)
- [Docs: Getting started with CLI](/docs/cli/get-started/)

👋 Thanks for reading!


Translation Hosting

SimpleLocalize CLI

REST API

Customer-specific translations

Posts tagged with `typescript`

List of i18n libraries for React, React Native, and NextJS