Enhance formatted messages for react-intl Sample in 2020

Enhance formatted messages for react-intl Sample in 2020


tutorials -

react-intl-enhanced-message

Enhance formatted messages as rich text with react-intl.

Installation

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:

.babelrc

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

Why?

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

So…

  • 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?)

Usage

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>!

FormattedEnhancedMessage

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>
`

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff