# bluerain Internationalisation plugin

Adds internationalization through [react-intl-redux](https://github.com/ratson/react-intl-redux) . <https://blueeast.gitbook.io/bluerain-plugin-intl>

| 🌏 Web | 🖥 Electron | 📱 React Native |
| ------ | ----------- | --------------- |
| ✔️     | ✔️          | TBD             |

### Screenshots

NA

## Components

This plugin registers following components in the Component registry, so they can be reused later by other apps and plugins:

* FormattedMessage[Web](https://github.com/yahoo/react-intl/wiki/Components#formattedmessage)
* FormattedNumber[ Web](https://github.com/yahoo/react-intl/wiki/Components#formattednumber)
* FormattedPlural [Web](https://github.com/yahoo/react-intl/wiki/Components#formattedplural)
* FormattedDate [Web](https://github.com/yahoo/react-intl/wiki/Components#formatteddate)
* FormattedTime[Web](https://github.com/yahoo/react-intl/wiki/Components#formattedtime)
* FormattedRelative[Web](https://github.com/yahoo/react-intl/wiki/Components#formattedrelative)

#### IntlConsumer

This Component is used to provide Intl functionality as a prop

```jsx
<BR.Components.IntlConsumer>
  {({ children, intl }) => {

  return props.intl
  }}
</BR.Components.IntlConsumer>
```

## Hooks

### bluerain.intl.messages

This hook gives the ability to add custom intl messages.

**Parameters:**

| Name     | Type   | Description     |
| -------- | ------ | --------------- |
| messages | Object | The messages db |

**Returns:**

| Name     | Type   | Description     |
| -------- | ------ | --------------- |
| messages | Object | The messages db |

**Example:**

This example registers custom english and urdu messages to the system:

```javascript
BR.Filters.add('bluerain.intl.messages', function eng(messages) {
    const en = require('./lang/en.ts');
    const ur = require('./lang/ur.ts');

    messages.en =  Object.assign(messages.en ? messages.en : {}, en);
    messages.ur = Object.assign(messages.ur ? messages.ur : {}, ur);

    return messages;
});
```

## API

### IntlPluginConfigs

This is the default configuration set that is used at boot time.

#### **Properties**

* `locale` [**Array**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) \[default: "en"] Tries to detect automatically, falls back to 'en'.
* `localeData` [**Array**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) An array of localData files.

### InternationalizationPlugin

#### **Extends Plugin**

react-intl plugin to add internationalization to BlueRain Apps

#### **Plugin Properties**

* `pluginName` [**string**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) "InternationalizationPlugin"
* `slug` [**string**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) "intl"

#### setLocale

Change app's locale

**setLocale Parameters**

* `locale` [**string**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) The locale id
* `ctx`  The BlueRain Context
* `localeData`[**Array**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
* `selectable`[**object**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

  **withIntl**

Higher Order component in inject `intl` prop in Component

#### **Parameters**

* `Component` **Component**

Returns **Component**

#### injectIntl

`react-intl`'s higher order component

#### **injectIntl Parameters**

* `Component` **Component**

Returns **Component**