# react-intl-ns

> Intl namespaces and shortcuts for reusable components.

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

## Install

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

## 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.4.0 |
| Published | 2016-04-19 |
| First published | 2016-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Wojtek Ruszczewski |
| Maintainers | wrwrwr |
| Keywords | react, react-intl |

## Links

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

## 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.4.0 (latest) — 2016-04-19
- 0.3.0 — 2016-02-07
- 0.2.0 — 2016-02-07
- 0.1.0 — 2016-01-20
- 0.0.2 — 2016-01-14
- 0.0.1 — 2016-01-14

## README

react-intl-ns
=============

Intl namespaces and shortcuts for components that hold their own translations.

Example
-------

```js
// app.jsx

import React, {Component} from 'react';
import {IntlNsProvider, intlShortcuts} from 'react-intl-ns';
import Comp from './comp';

const {t} = intlShortcuts();
const messages = {title: "app title"};

class App extends Component {
    render() {
        return  <IntlNsProvider locale='en' messages={messages}>
                    <div>
                        {t`title`}
                        <Comp />
                    </div>
                </IntlNsProvider>;
    }
}

// comp.jsx

import React, {Component} from 'react';
import {IntlNamespace, intlShortcuts} from 'react-intl-ns';

const {t} = intlShortcuts('comp');
const messages = {en: {title: "comp title"}};

export default class Comp extends Component {
    render() {
        return  <IntlNamespace namespace='comp' messages={messages}>
                    {t`title`}
                </IntlNamespace>;
    }
}
```

The `t` shortcut inserts a `<FormattedMessage>` with id prefixed by a namespace.
`<IntlNamespace>` injects messages and formats into `context.intl.namespaces`.
The extended provider detects prefixed ids and substitutes messages and formats
from the proper namespace.

Shortcuts
---------

Three shortcuts are available out-of-the-box:

* `t` inserts a `<FormattedMessage>` element,
* `h` a `<FormattedHTMLMessage>`,
* and `n` a `<FormattedNumber>`.

First two can be used as a template tag or a function, for example both
``t`id` `` and `t('id')` do the same. In the first form the template is
actually evaluated:

```js
let i = 5;
t`id${i}`
```

will insert message with `id5`. Values can be given as a second argument, using
the function call syntax:

```js
t('id', {photos: 22})
```

The `defaultMessage` prop is set to the first shortcut argument:

```js
t`This is a message.`
```

The last form is handy for early prototyping, with messages declared in-place.

Formats
-------

You may also provide component-specific formats using
`<IntlNamespace formats={...}>`.

These can be used within namespaced messages:

```js
const messages = {en: {freq: "Frequency: {f, number, frequency}"};
const formats = {number: {frequency: {style: 'percent'}}};

t('freq', {f: 0.5});
```

or directly using the `n` shortcut:

```js
n('frequency', 0.5)
```

Direct format*
--------------

To translate a `placeholder`, an `aria-` attribute or other text where a React
element cannot be used, consider a `ts`, `hs` or `ns` shortcut:

```js
import React, {Component} from 'react';
import {injectlIntl, intlShape} from 'react-intl';
import {IntlNamespace, intlShortcuts} from 'react-intl-ns';

const {ts} = intlShortcuts('forms');
const messages = {en: {placeholder: "Write a poem?"}};

@injectIntl
export class Textarea extends Component {
    static propTypes = {intl: intlShape.isRequired};

    render() {
        return  <IntlNamespace namespace='forms' messages={messages}>
                    <textarea placeholder={ts`placeholder`(this.props.intl)} />
                </IntlNamespace>;
    }
}
```

These shortcuts can be used similarly to their non-string counterparts (as
template tags or functions with values), but generate string promises instead
of elements. That's why they need to be manually given the `intl` object.

If you do not mind using the experimental `context` you may avoid the decorator
by adding `intl` to `contextTypes`.

Shortcut factories
------------------

Two helpers are available for modules that would like to provide shortcuts for
namespaced version of custom components.

If the component extends `FormattedMessage` use `intlMessageShortcut` factory:

```js
class CustomMessage extends FormattedMessage {}

import {intlMessageShortcut} from 'react-intl-ns';
export const cm = intlMessageShortcut(CustomMessage);
```

If it is similar to `FormattedNumber` use `intlNumberShortcut` instead:

```js
class CustomNumber extends FormattedNumber {}

import {intlNumberShortcut} from 'react-intl-ns';
export const cn = intlNumberShortcut(CustomNumber);
```

<!---
Factories for string-generating shortcuts are provided as
`intlMessageStringShortcut` and `intlNumberStringShortcut`.
-->

Installation and usage
----------------------

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

### Bundler and transpiler

Import `main.jsx` from the module:

```js
import * from 'react-intl-ns/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-ns',
loader: 'babel',
query: {presets: ['es2015', 'stage-0', 'react']}
```

### Without a transpiler

Require `react`, `react-intl`, and `react-intl-ns`:

```js
var React = require('react');
var ReactIntl = require('react-intl');
var ReactIntlNs = require('react-intl-ns');
```

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

So you have a project that needs translations namespacing, but doesn't use a
bundler. Nevertheless, 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-ns/dist/main.es5.js"></script>
```

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

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