Skip to main content Link Menu Expand (external link) Document Search Copy Copied

MessageProvider() function

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


export declare function MessageProvider(props: MessageProviderProps): FunctionComponentElement<ProviderProps<MessageContext>>;


Parameter Type Description
props MessageProviderProps  




import React from 'react'
import { Message, MessageProvider } from '@messageformat/react'

const messages = { example: { key: 'Your message here' } }
const extended = { other: { key: 'Another message' } }

const Example = () => (
    <Message id={['example', 'key']} />
    {' | '}
    <Message id="other/key" />
) // 'Your message here | Another message'

export const App = () => (
  <MessageProvider messages={messages} pathSep="/">
    <MessageProvider messages={extended}>
      <Example />