react-intl-marked
When you need some message structure defined in the same place as the message.
Example
<FormattedMarkedMessage id='greeting' defaultMessage="Hello |{name}|!|br|How are you today?" values=name: "Winston" />
would render as:
Hello Winston! How are you today?
The content between bars is wrapped in <span class="marked">
and |br|
markers are replaced by <br/>
.
Values can be React elements just as with <FormattedMessage>
, the resulting
tree takes advantage of React's virtual DOM.
Extending
A different marker or wrapper?
marker = '*'; { let key = `star-`; return <span key=key className='starred'>elements</span>; }
Some other substitutions?
substitutions = /\*\*/g; { let key = `rand-`; return <span key=key>Math</span>; }
Shortcut
If you happen to have react-intl-ns
installed you may use a shortcut in place of <FormattedMarkedMessage>
:
;const m = ; m`Hello |Winston|!|br|How are you today?`
The shortcut factory may be given a namespace (a string) binding generated
elements to the namespace (to be used in conjunction with IntlNsProvider
and
IntlNamespace
).
Installation and usage
npm install react react-intl react-intl-ns react-intl-marked
Bundler and transpiler
Import main.jsx
from the module:
;
and ensure it is passed through a transpiler. For instance, with Webpack and Babel add a loader such as:
test: /\.jsx$/include: 'react-intl-marked'loader: 'babel'query: presets: 'es2015' 'stage-0' 'react'
Without a transpiler
Require react
, react-intl
, and react-intl-marked
:
var React = ;var ReactIntl = ;var ReactIntlMarked = ;
You may also require a bundle for a specific standard edition by appending
/dist/main.es5.js
(ES5 is the default, and the only option, unless you are
reading this in the future).
Without a bundler
Add at least the following scripts to your page:
or take a look at a minimal example.