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

The study shows that 72% of consumers are more likely to stay on a website if it has 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. You are welcome to add your resources as a pull requests or just create a new issue.

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

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

2. FormatJS

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

See also

• Integration guide: translations hosting - check how to use SimpleLocalize with FormatJS library
• Extract i18n keys from FormatJS project - learn more about message extraction done by SimpleLocalize CLI
• Blog post: FormatJS and React application localization - blog post about FormatJS translation management with SimpleLocalize
• Github repository: example project - example project code with configured FormatJS
• Live demo - see live demo of FormatJS (react-intl) and SimpleLocalize integration

3. FormatJS CLI

Extract messages from project with FormatJS library. Learn how to upload extracted translation messages to SimpleLocalize.

4. react-i18nify

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

5. 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.

6. 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.

npm install --save @assembless/react-littera

7. react-i18next

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 - check how to use SimpleLocalize with i18next library
• Extract i18n keys from i18next library - use SimpleLocalize CLI to find translation keys used in the project
• Blog post: i18next in 3 steps - blog post about integrating SimpleLocalize with i18next
• Github repository: example project - example project with configured i18next with 'http-backed' and 'loadpath'
• Live demo - see live demo of i18next with configured http-backend and 'loadpath'.

8. 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.

9. 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 in NextJS 10.

10. react-translated

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

11. 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.

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

npm install --save react-intl-hooks

13. typesafe-i18n

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

npm install --save typesafe-i18n

12. SimpleLocalize

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.

1. Upload translations

2. Translate in editor

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

3. Download translations

4. Localization hosting

Check also translation hosting option to keep your localization files in the cloud.

Resources:

• i18next: integration guide
• FormatJS: integration guide
• FormatJS CLI: integration guide
• Docs: translation hosting
• Docs: Getting started with CLI

👋 Thanks for reading!