Skip to content

react.md

Latest commit

 

History

History
61 lines (44 loc) · 3.85 KB

react.md

File metadata and controls

61 lines (44 loc) · 3.85 KB
title @messageformat/react
parent API Reference
has_children true
has_toc false

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 })

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.

The returned function takes two parameters (msgId, msgParams), which will extend any values set by the hook's arguments.
Message(props)

<Message id [locale] [params] [...msgParams]>

The value of a message. May also be used with a render prop: <Message id={id}>{msg => {...}}</Message>.
MessageProvider(props)

<MessageProvider messages [locale] [merge] [onError] [pathSep]>

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.
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)

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.

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.
useMessageGetter(rootId, opt)

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.

The returned function takes two parameters (msgId, msgParams), which will extend any values set by the hook's arguments.

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.