Top libraries to add translations to your React applications

Personalized content, push notifications, offline content and instant updates are just some of the advantages of apps today.Mobile applications provide a great user experience and developers use React to quickly build these apps across different platforms.

React offers different libraries, already written components, to add internationalization to the apps. Significantly reducing time and costs for the developers, these international libraries allow the app to function and be supported in any language around the world. 

( Interested in learning about React components? We have a simple guide on how to build reusable components using React )

While there are many international libraries to choose from, we have analyzed the top 4 React Component Libraries.

React Component Libraries

React-intl:

Developed on top of FormatJS with the backing of Yahoo, React-intl is the most popular library for internationalization ofReact applications. It is built upon JavaScript Intl built-ins and industry-wide i18n standards. From a syntax perspective, it mimics the ICU Message syntax that is widely used in PHP & Java as well. Library providesReact components and an API to format dates, numbers, and strings, including pluralization and handling translations. Being the first in React’s i18n arena it enjoys the wide adoption & large community.

React-i18next:

Developed on top on i18n , react-i18next has a philosophy very similar to ReactJS; Learn once - translate everywhere . i18n community has developed a lot of integrations to use it with manyfrontend frameworks and languages. It has a wide variety of plugins and utils to provide some out of the box solutions around internationalization of apps. Some of these are a plugin to detect user's language, loading & caching translations that might be handy for large scale apps. For translation files, i18next gives you the option to separate translations into multiple files and load them on demand. For small apps, you can have a single translation file to keep things simple. There are many modules built for and around i18next: from extracting translations from your code over bundling translations using webpack, to converting gettext, CSV and RESX to JSON.

React-intl-universal:

react-intl-universal is a developed by Alibaba Group and has all the good of react-intl available along with the support of using it in Vanilla JS. Alibaba feels the basic issue with react-intl is it can be applied only in view layer such as React.Component along with few others

@lingui/react:

React wrapper of LinguiJS, is the smallest of all i18n libraries available today for react applications. Like react-intl it uses ICU messages syntax that makes it easier to adopt in applications already built using other libraries. On top of all goods of react-intl , it supports rich-text messages and provides macros to support messages in Vanilla JS i.e outside ofReact components. It also has a powerful CLI tool to manage all of your translation workflows.

React Library Features

Here we have highlighted major features from all of these React Component libraries. React-intl comes with awesome support of relative dates that updates as the time changes. While react-i18next has nesting and namespace support that makes it a wise choice for large scale applications .

Feature / Library

React-intl

React-i18next

react-intl-universal

@lingui/react

Number Formats

Yes

Yes

Yes

Yes

Pluralizations 

Yes

Yes

Yes

Yes

Date formats

Yes

Yes

Yes

Yes

Relative dates

Yes

No

Yes

No

HTML support

Yes

No

Yes

Yes

Interpolation

Yes

Yes

Yes

Yes

Nesting

No

Yes

No

No

Namespace

No

Yes

No

No

NPM Trends

One of the major considerations before adopting any library for large scale apps is to know how trusted it has been amongst other developers. For internationalization, npm trends show that react-intl is widely adopted followed by react-i18next amongst all other libraries.

Bundle Size

One of the core challenges that we encounter while developing any large scale app is, “Performance”. Today, developers are investing more time to find ways to optimize the code delivery to client’s machine. While selecting the i18n library for our apps, consideration must be taken towards the size as it impacts the JS bundle.

As per bundle phobia report:

  • React-intl : 12kb 
  • React-i18next : 5.4kb
  • React-intl-universal : 24kb
  • @lingui/react : 2.5kb

As seen @lingui/react takes the lead followed by react-i18next . React-intl-universal been build on top of react-intl has the biggest bundle. Just to mention these sizes doesn’t include the size of locale bundles that might be shipped with your app as per requirements.

( If you'd like more help with improving performance, we have a two part series on best front-end performance optimization tricks you should check out. )

Browsers Support

The most painful task in frontend development today can be supporting legacy browsers.  Selecting i18n library might have an impact on the application’s support for old browsers .  Below is the summary of browser support for libraries under discussion.

Browser / Library

React-intl

React-i18next

react-intl-universal /llgdk

Chrome

Current - 2

Current - 2

Current - 2

Firefox

Current - 2

Current - 2

Current - 2

Safari

Current

Current

Current

Edge

Current - 2

Current - 2

Current - 2

Internet Explorer

11+

11+

11+

We were unable to find browser support information about lingui JS.

In a Nutshell

After analyzing the top 4 component libraries for translations in react applications we have seen that based on the needs of the business, react-intl and react-i18next are most effective for adoption and features.

React-intl being widely adopted has a larger community, it is more battle-tested and has been around for a longer period. Apps that rely on the real-time update for relative time should go with it without any second thought. 

React-i18next has some effective features for large scale applications. With lesser bundle size and wide range of plugins, it is a library worth giving a shot. For large scale applications, features like namespace and nesting can prove to be very important.

Don’t forget to share your experience with any of these libraries.

If you work with large scale projects, here's a great React best practices guide I wrote .

Some other popular React articles on our blog:

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章