Enhance formatted messages for react-intl

Apr 04, 2019
Enhance formatted messages for react-intl


Enhance formatted messages as rich text with react-intl.

View demo Download Source


yarn add react-intl-enhanced-message

Following peer depepencies are required to be installed in your app:

  • react >= 16.3.2
  • react-intl >= 2.0.0

???? Note:

If you need this to be picked up by babel-plugin-react-intl I suggest to install the fork @allthings/babel-plugin-react-intl as the original seems not to be maintained anymore.

With this you can use it like:


{ "plugins": [ ["@allthings/babel-plugin-react-intl", { "additionalComponentNames": { "react-intl-enhanced-message": ["FormattedEnhancedMessage"], }, }] ] }


This aims to solve this ongoing issue for react-intl: Rich text formatting and translations

The translator shouldn't need to worry about "email" is a hyperlink in the UI, and I don't want to limit support to just HTML


  • do you use react-intl?
  • do you like rich text formatting for translated messages?
  • do you want this to be as easy as possible for the developer and the translator?

→ Then this library might be just right for you ????

However it's as simple as it gets and only makes simplest replacements of values. So there's no support for nested elements or other fancy stuff. (yet?)


import { FormattedEnhancedMessage } from 'react-intl-enhanced-message' const Component = () => ( <FormattedEnhancedMessage id="greeting" defaultMessage="Hello <x:strong>{user}</x:strong>!" values={{ user: 'Dan' }} // enhancements in: 3, 2, 1… enhancers={{ strong: user => <strong>{user}</strong> }} > )

This will result in following HTML:

Hello <strong>Dan</strong>!


This component accepts all properties as FormattedMessage from react-intl with the following exceptions:

  • children: Has no effect
  • tagName: Has no effect

However it adds following property:

  • enhancers: Expects an object

The translated messages can have HTML/JSX like 'tags' to indicate that the content should be replaced by an enhancer function.

As suggested in the linked issue, every tag starts with the namespace 'x', e.g. like <x:sth>.

To illustrate this, see the following example:

const enhancers = { // Will replace anything between <x:em> and </x:em> em: emphasized => <strong>{emphasized}</strong>, // Will replace anything between <x:italic> and </x:italic> italic: italic => <i>{italic}</i>, } const translation = ` Good <x:em>morning</x:em> <x:italic>Dan</x:italic>! We hope you have a <x:em>beautiful</x:em> day so far. <x:em><x:italic>Only the outer 'tag' would be replace correctly here.</x:italic></x:em> <x:unknown>This will be left untouched as there is no enhancer registered for unknown.</x:unknown> `