npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-intl-enhanced-message

v0.1.0

Published

Enhance formatted messages for react-intl

Downloads

427

Readme

react-intl-enhanced-message

Build Status npm

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"],
      },
    }]
  ]
}

Example

Here's a simple example on CodeSandbox:

Edit Simple FormattedEnhancedMessage example

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.

Be aware that replacements of an arbitrary depth is not supported yet, only one level deep so far.

For example: <a><b><c>…</c></b></a>

Only replacements b and c would be carried out. This is to reduce complexity. If you need deeper levels to be supported I am happy to receive PRs.

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>Emphasized and italic text here!</x:italic></x:em>

<x:unknown>This will be left untouched as there is no enhancer registered for unknown.</x:unknown>
`