BlueRain OS
  • Introduction
  • API
    • API Reference
  • Guides
    • Apps
      • Installation
      • Creating an App
      • Configuration
    • Components
      • Registering Components
      • Extending Components
      • Replacing Components
      • Accessing Raw Components
      • Components & HoCs
    • Filters
      • Known Filters
    • Plugins
      • Installation
      • Configuration
      • Creating a Plugin
  • Miscellaneous
    • JSON to React
  • Plugins
    • Apollo
    • Internationalization
    • Material UI
    • React Router
    • Redux
    • Redux Devtools
    • Why Did You Update
Powered by GitBook
On this page
  • Usage
  • Installation
  • Loading Locale Data Sets
  • Change locale in app
  • Components
  • Filters
  • bluerain.intl.messages
  • API
  • IntlPluginConfigs
  • InternationalizationPlugin
  • add
  1. Plugins

Internationalization

PreviousApolloNextMaterial UI

Last updated 6 years ago

Adds internationalization through (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

InternationalizationPlugin

Extends Plugin

react-intl plugin to add internationalization to BlueRain Apps

Properties

setLocale

Change app's locale

Parameters

  • 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

locale [default: "en"] Tries to detect automatically, falls back to 'en'.

localeData An array of localData files.

pluginName "InternationalizationPlugin"

slug "intl"

locale The locale id

https://github.com/ratson/react-intl-redux
Array
Array
string
string
string