Get-message NPM

get-message

Small lib as a helper or replacement for react-intl

This library provides API to format dates, numbers, and strings, including pluralization and handling translations.

Description

This small library provides a simpler way of using international translations in your app.

By using it you can inject your translation anywhere by passing function

Installation

npm install get-message --save
or
yarn add get-message

Features

Display numbers with separators.
Display dates and times correctly.
Display dates relative to "now".
Pluralize labels in strings.
Support for 150+ languages.
Runs in the browser and Node.js.
Built on standards.

Documentation

get-message is based on React Intl, so all functionality should remain the same. React Intl's docs are in this GitHub repo's Wiki, Get Started. There are also several runnable example apps which you can reference to learn how all the pieces fit together.

Use cases

Have you ever had a problem with passing <FormatMessage/> or intl.formattedMessage() to input placeholder or any other component which don't allow Components or JSX?

Tired of injectIntl wrapper? or constantly passing message id and defaultMessage everywhere?

Usage

config props ={
  locale: string,
  timeZone: string,
  formats: object,
  messages: object,
  defaultLocale: string,
  defaultFormats: object,
  onError: func
}

Call anywhere in your App:

const config={locale: lang, messages: messages[lang]}
MessageProvider.initialize(config)

or if you want to replace react-intl just remove and initialize MessageProvider

import { MessageProvider } from 'get-message';
import messages from './messages';
const App = ({ lang }) => {
  MessageProvider.initialize({ locale: lang, messages: messages[lang] });
  return <YourApp />;
};

if messages, lang or any other config has changed MessageProvider will be updated

now somewhere inside

import getMessage from 'get-message';

and use it like

<Input placeholder={getMessage(prefix, type)(id, options)} />

type is one of:

date, time, number, relative, plural => prefix is omitted, id is value
html, 'blank' => prefix is not required,

options: variables, formats etc like in react-intl

example:

const getMsg = getMessage('prefix');

const Inputs = ({ id1, id2, id3 }) => (
  <div>
    <Input placeholder={getMsg(id1)} />
    <Input placeholder={getMsg(id2)} />
    <Input placeholder={getMsg(id3)} />
  </div>
);

More info

get-messages is just one of many packages that make up the FormatJS suite of packages, and you can contribute to any/all of them, including the Format JS website itself.