react package

An efficient React front-end for message formatting

Remarks

Designed in particular for use with messageformat, but will work with any messages. Provides the best possible API for a front-end developer, without making the back end any more difficult than it needs to be either. Should add at most about 1kB to your compiled & minified bundle size.

Example

import {
  MessageContext,
  MessageProvider,
  Message,
  getMessage,
  getMessageGetter,
  useLocales,
  useMessage,
  useMessageGetter
} from '@messageformat/react'

Functions

Function	Description
getMessage(context, id, locale)	Given a MessageContext instance, fetches an entry from the messages object of the current or given locale. The returned value will be undefined if not found, or otherwise exactly as set in the MessageProvider props.
getMessageGetter(context, rootId, { baseParams, locale })	<p>Given a MessageContext instance, returns a message getter function, which may have a preset root id path, locale, and/or base parameters for message functions.</p><p>The returned function takes two parameters (msgId, msgParams), which will extend any values set by the hook’s arguments.</p>
Message(props)	<p><Message id [locale] [params] [...msgParams]></p><p>The value of a message. May also be used with a render prop: <Message id={id}>{msg => {...}}</Message>.</p>
MessageProvider(props)	<p><MessageProvider messages [locale] [merge] [onError] [pathSep]></p><p>Makes the messages available for its descendants via a React Context. To support multiple locales and/or namespaces, MessageProviders may be used within each other, merging each provider’s messages with those of its parents. The locale preference order is also set similarly, from nearest to furthest.</p>
useLocales()	A custom React hook providing the current locales as an array of string identifiers, with earlier entries taking precedence over latter ones. Undefined locales are identified by an empty string ''.
useMessage(id, params, locale)	<p>A custom React hook providing an entry from the messages object of the current or given locale. The returned value will be undefined if not found.</p><p>If the identified message value is a function, the returned value will be the result of calling it with a single argument params, or {} if empty. Otherwise the value set in the MessageProvider props will be returned directly.</p>
useMessageGetter(rootId, opt)	<p>A custom [React hook] providing a message getter function, which may have a preset root id path, locale, and/or base parameters for message functions.</p><p>The returned function takes two parameters (msgId, msgParams), which will extend any values set by the hook’s arguments.</p>

Interfaces

Interface	Description
MessageContext
MessageProps
MessageProviderProps

Variables

Variable	Description
MessageContext	The context object used internally by the library. Probably only useful with Class.contextType or for building custom hooks.