Gatsby and React Internationalisation
When it comes to designing web applications for international users, we not only need to think about translations, but also all the variations that come with translating text, such as plural forms, formats for dates and currencies, and a handful of other logistics as well.
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
Date translation
Time translation
Currency translation
Plurals translation
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!