get-message

Small lib as a replacement for react-intl

Usage no npm install needed!

<script type="module">
  import getMessage from 'https://cdn.skypack.dev/get-message';
</script>

README

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.

npm Version Build Status Coverage functions Dependency Status

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][examples] 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.

Todo

  • more details specification
  • more features and use cases

Contribute

feel free to improve this lib :)

License

This software is free to use. GNU license. See the LICENSE file for license text and copyright information.