How to use localization messages in non-component code in React?

When it comes to using localization messages in non-component code in React, it all depends on the localization library being used. However, one popular localization library that can be used for this purpose is react-intl.

The react-intl allows you to define and format messages in your application's non-component code. It provides a simple API for accessing localized messages that can be used anywhere in your codebase. Other localization libraries likely follow similar approaches, but it's important to consult the documentation for each library to ensure proper usage.

import {createIntl, createIntlCache, RawIntlProvider} from 'react-intl';

// This is optional but highly recommended since it prevents memory leak
const cache = createIntlCache();

const intl = createIntl({ locale: 'en-US', messages: {} }, cache);

// Call imperatively
intl.formatNumber(20);

React internationalization tutorial:

Copyrights 2024 © Localizely