Internationalization

Adds internationalization through (react-intl-redux)[https://github.com/ratson/react-intl-redux].

Usage

Run the following command in the plugin directoy:

Installation

npm i --save @blueeast/bluerain-plugin-intl

Then in your boot function, pass the plugin like this:

import BR from '@blueeast/bluerain-os';
import IntlPlugin from '@blueeast/bluerain-plugin-intl';

BR.boot({
    plugins: [IntlPlugin]
})

Loading Locale Data Sets

In your configs object, add locale data sets like this:

const config = {
    locale: 'ur', // This will be the default locale when app boots
    plugins: {
        // Internationalization
        intl: {
            localeData: [].concat(
                require('react-intl/locale-data/ur'),
                // require('react-intl/locale-data/fr')
            )
        }
    }
};

Then boot with the configs:

BR.boot({
    config,
    plugins: [IntlPlugin]
})

Change locale in app

Make sure you have access to the BlueRain context. Then do this:

// ctx is BlueRain context
ctx.Plugins.get('intl').setLocale('ur', ctx);

Components

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

• FormattedMessage

• FormattedNumber

• FormattedPlural

• FormattedDate

• FormattedTime

• FormattedRelative

Filters

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.

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

    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 [default: "en"] Tries to detect automatically, falls back to 'en'.

• localeData Array An array of localData files.

InternationalizationPlugin

Extends Plugin

react-intl plugin to add internationalization to BlueRain Apps

Properties

• pluginName string "InternationalizationPlugin"

• slug string "intl"

setLocale

Change app's locale

Parameters

• locale string The locale id

• ctx BlueRain The BlueRain Context

withIntl

Higher Order component in inject intl prop in Component

Parameters

• Component Component

Returns Component

injectIntl

react-intl's higher order component

Parameters

• Component Component

Returns Component

add

Integrations