# react-intl-marked

> Limited-structure message component for react-intl.

Latest version **0.1.0** (published 2016-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-intl-marked
pnpm add react-intl-marked
yarn add react-intl-marked
bun add react-intl-marked
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2016-04-19 |
| First published | 2016-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Wojtek Ruszczewski |
| Maintainers | wrwrwr |
| Keywords | react, react-intl, react-intl-ns |

## Links

- npm: https://www.npmjs.com/package/react-intl-marked
- Repository: https://github.com/wrwrwr/react-intl-marked
- Homepage: https://github.com/wrwrwr/react-intl-marked#readme
- Issues: https://github.com/wrwrwr/react-intl-marked/issues
- npm.io page: https://npm.io/package/react-intl-marked

## Dependencies (1)

- [react-intl-ns](https://npm.io/package/react-intl-ns.md) ^0.4.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2016-04-19
- 0.0.3 — 2016-01-20
- 0.0.2 — 2016-01-20
- 0.0.1 — 2016-01-17

## README

react-intl-marked
=================

When you need some message structure defined in the same place as the message.

Example
-------

```js
<FormattedMarkedMessage
        id='greeting'
        defaultMessage="Hello |{name}|!|br|How are you today?"
        values={{name: "Winston"}} />
```

would render as:

```html
<span>
    Hello <span class="marked">Winston</span>!
    <br/>
    How are you today?
</span>
```

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?

```js
class Message extends FormattedMarkedMessage {
    marker = '*';

    mark(elements, counter) {
        let key = `star-${counter}`;
        return <span key={key} className='starred'>{elements}</span>;
    }
}
```

Some other substitutions?

```js
class Message extends FormattedMarkedMessage {
    substitutions = /\*(rand)\*/g;

    rand(counter) {
        let key = `rand-${counter}`;
        return <span key={key}>{Math.random()}</span>;
    }
}
```

Shortcut
--------

If you happen to have [react-intl-ns](https://github.com/wrwrwr/react-intl-ns)
installed you may use a shortcut in place of `<FormattedMarkedMessage>`:

```js
import {markedShortcut} from 'react-intl-marked';
const m = markedShortcut();

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

```bash
npm install react react-intl react-intl-ns react-intl-marked
```

### Bundler and transpiler

Import `main.jsx` from the module:

```js
import * from 'react-intl-marked/main.jsx';
```

and ensure it is passed through a transpiler. For instance, with Webpack and
Babel add a loader such as:

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

```js
var React = require('react');
var ReactIntl = require('react-intl');
var ReactIntlMarked = require('react-intl-marked');
```

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:

```html
<script src="node_modules/react/dist/react.js"></script>
<script src="node_modules/react-intl/dist/react-intl.js"></script>
<script src="node_modules/react-intl-marked/dist/main.es5.js"></script>
```

or take a look at a [minimal example](tests/browser.html).

---
_Source: https://npm.io/package/react-intl-marked · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._