Intl messages provider

Typescript ❤️

IntlMessagesProvider is a Frontend Utility to asynchronously load i18n translated messages and feed them to IntlProvider based on the locale in product.

Install

yarn add @atlaskit/intl-messages-provider

npm

@atlaskit/intl-messages-provider

Source

Bitbucket

Bundle

unpkg.com

Changelog

Latest

2.0.0

Major Changes

#117363 10a0f7f6c2027 - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026

IntlMessagesProvider is a Frontend Utility to asynchronously load i18n translated messages and feed them to IntlProvider based on the locale in product.

Installation

yarn add @atlaskit/intl-messages-provider

Usage

      import { IntlMessagesProvider } from "@atlaskit/intl-messages-provider";
      import messages from '../../i18n/en';

      // Use a callback function to async load the translations from your package
      const fetchMessages = async (locale:  string) => {
        const i18n = await import(\`../../i18n/\${locale}\`);
        return i18n.default
      }

      const YourComposedComponent = (props: YourComponentProps) => {
        return (
          <IntlMessagesProvider defaultMessages={messages} loaderFn={fetchMessages}>
            <YourComponent {...props}>
          </IntlMessagesProvider>
        )
      }

Props

`loaderFn` `function` `required`

Use this function to asynchronously load translated messages from your package and feed them to our internal IntlProvider This will enable translations in Product

locale => PromiseOne of One of Recordstring, string, 
Recordstring, Arrayreact-intl-next.MessageFormatElement
, 
undefined

`defaultMessages` `union`

On first render the messages in IntlProvider will be undefined,
to prevent the missing translations error use defaultMessages to
pass the default language messages object synchronously.
Does not override the messages that are inherited from
the parent intl provider, if there are any

One of Recordstring, string, 
Recordstring, Arrayreact-intl-next.MessageFormatElement

`children` `React.ReactNode`

Your wrapped Component

React.ReactNode

Examples

Basic example

	foo	bar
With inherited messages	Parent foo message	Parent bar message
Without inherited messages	Custom foo default message	Custom bar default message