Gatsby and React Internationalisation 

Gatsby and React internationalisation 

Here are some of the most popular libraries that can help you deal with these issues:

  • Gatsby + React

  • react-intl


Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layers that makes integrating different content, APIs, and services into one web experience incredibly simple.

React Intl is a part of the FormatJS set of i18n libraries and provides support for over 150+ languages. In this article we will explain how you can use modern tools to solve this set of internationalisation problems. 

Internationalisation
 

Internationalisation is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.

Internationalisation can be generally broken down into the following challenges:

  • detecting the user’s locale

  • translating UI elements, titles and hints

  • serving locale-specific content such as dates, currencies and numbers



Problem analysis

When evaluating approaches/tools for multilingualism with Gatsby.js, the solution should:

  • Produce translated strings in both client/server rendered components

  • Follow best practices, using battle-tested utilities

  • Follow React.js patterns



In short, the tool or the approach taken to solve the issue should be maintainable.

Solution

React-intl (Format.js)

This library offered by Yahoo is one of the most popular solutions for i18n in React and it’s now part of Format.js.

Format.js is a modular collection of JavaScript libraries for internationalisation that are focused on formatting numbers, dates, and strings for displaying to people. It includes a set of core libraries that build on the JavaScript Intl built-ins and industry-wide i18n standards, plus a set of integrations for common template and component libraries.

React Intl has a set of React components that provide a declarative way to set up an i18n context and format dates, numbers, and strings for display in a web UI. The components render React elements by building on React Intl's imperative API.

React Intl uses the provider pattern to scope an i18n context to a tree of components. This allows configuration like the current locale and set of translated strings/messages to be provided at the root of a component tree and made available to the <Formatted*> components. This is the same concept as what Flux frameworks like Redux use to provide access to a store within a component tree.

String translation

```js
<FormattedMessage id="key_to_translate" />
```


Date translation

```js
<FormattedDate
 value={new Date(1459832991883)}
 year="numeric"
 month="long"
 day="2-digit"
/>

```


Time translation

```js
<FormattedTime value={new Date(1459832991883)} />
```


Currency translation

```js
<FormattedNumber value={1000} style="currency" currency="EUR" />
```


Plurals translation

```js
<FormattedPlural
 value={count}
 one={<FormattedMessage id="key_to_translate" />}
 other={<FormattedMessage id="key_to_translate_plural" />}
/>
```


In conclusion, using an i18n React library to simplify web components to translate strings, dates,
time, currencies and plurals is the best way forward for building an application with multilingual translation. By using Gatsby and react-intl, we have a stable and easy way to make a project more responsive to internationalisation and reach more people across the world. Need some help making sure your site or application is capable of reaching users all over the world? We can help — get in touch today!

Stay in the Loop

We will use the personal data you are sharing with us solely for the purpose of sending you our newsletter. See more here: Data Privacy.

GET IN TOUCH

Let us know how we can help you.

1