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

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 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. Feel free 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!

Screenshot 2021-02-13 at 16.48.01

2. FormatJS

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

formatjs library

See also

3. FormatJS CLI

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

formatjs cli

4. react-i18nify

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

react-i18nify

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.

react-persion

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.

react littera for managing translations

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

react localization

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.

react-translate

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.

next-translate

10. react-translated

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

react-translated

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' })

react-intl hooks

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.

typesafe-i18n example demo

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

translations cli upload

2. Translate in editor

simplelocalize editor - change-translation

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

3. Download translations

simplelocalize cli download

4. Localization hosting

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

fetching translations from backend

Resources:

👋 Thanks for reading!


Share article
See all articles
Try SimpleLocalize i18n editor and hosting
localization workflow process

Relevant posts

Number formatting in JavaScript

Number formatting in JavaScript

Jakub PomykałabyJakubNovember 28, 2021

Discover power of 'toLocaleString' functions in JavaScript. Format numbers, currencies, and units without any 3rd party localization library.

Read more
How to create a multi-language website in GatsbyJS?

How to create a multi-language website in GatsbyJS?

Jakub PomykałabyJakubAugust 09, 2021

Create a multi-language GatsbyJS website with a few simple steps. A multi-language website is a great way for your company to reach a wider audience.

Read more
How to use code splitting with JSON files in React application

How to use code splitting with JSON files in React application

Jakub PomykałabyJakubAugust 06, 2021

Lazy load JSON resource with language translations to speed up your React application. Use built-in code-splitting feature to load JSON files.

Read more
FormatJS and React application localization

FormatJS and React application localization

Jakub PomykałabyJakubOctober 07, 2020

Localize your React app using FormatJS and react-intl. Manage translations using SimpleLocalize.io

Read more
i18next and React application localization in 3 steps

i18next and React application localization in 3 steps

Jakub PomykałabyJakubOctober 01, 2020

How to localize ReactJS application with i18next internationalization library. Learn how to manage localization in software project

Read more
Internationalization tool for yahoo/react-intl

Internationalization tool for yahoo/react-intl

Kinga WojciechowskabyKingaJune 26, 2020

Are you struggling with keeping your app translations up to date and your dreams are filled with empty keys to translate? No worries, we know that feeling very well. To make the whole localisation process easier, we created a simple and effective solution which will improve the quality of translations and help you keep them in track!

Read more