Layout's menu mode,side: right-hand navigation,top: top navigationĬontent mode of layout,Fluid: adaptive,Fixed: fixed 1200px The header click event of the top bar in mix mode Render a block at the bottom of the layout If your application creates a custom history, you will need to display the location attribute as described in issue The location information of the current application session. Whether to remove all self-contained interfaces Url to the top-left corner of layout's logo The title of the top-left corner of the layout
This is meant to provide a centralized way to format common tags such as. defaultRichTextElements Ī map of tag to rich text formatting function. This wraps the output in a single React.Fragment to suppress that. When formatting rich text message, the output we produced is of type Array, which will trigger key error. By default, error messages are logged using console.error if NODE_ENV is not set to production. onError Īllows the user to provide a custom error handler. Before V3, span was used instead check the migration guide for more info. Provides a way to configure the default wrapper for React Intl's components. Without defaultLocale and/or if it's set incorrectly, you might run into scenario where a sentence is in English but embedded date/time is in Spanish. defaultLocale should be the locale that defaultMessages are declared in so that a sentence is coherent in a single locale. defaultLocale and defaultFormats ĭefault locale & formats for when a message is not translated (missing from messages). Notice how there is no defaultMessages, that's because each Message Descriptor provides a defaultMessage. While defaultLocale and defaultFormats are for fallbacks or during development and represent the app's default. The user's current locale and what the app should be rendered in. IntlFormatters: The imperative formatting API described below.IntlConfig: The intl metadata passed as props into the parent.The definition above shows what the props.intl object will look like that's injected to your component via injectIntl. This interface is exported by the react-intl package that can be used in conjunction with the injectIntl HOC factory function. Type IntlShape = IntlConfig & IntlFormatters ReactHTMLįormatDate ( value : number | Date | string, opts ? : FormatDateOptions ) : stringįormatTime ( value : number | Date | string, opts ? : FormatDateOptions ) : stringįormatNumber ( value : number, opts ? : FormatNumberOptions ) : stringįormatList ( values : Array, opts ? : FormatListOptions ) : stringįormatListToParts ( values : Array, opts ? : FormatListOptions ) : Part The value of the prop will be of type IntlShape, defined in the next section. (This is similar to the connect-to-stores pattern found in many Flux implementations.)īy default, the formatting API will be provided to the wrapped component via props.intl, but this can be overridden when specifying options.intlPropName. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its props. This function is exported by the react-intl package and is a High-Order Component (HOC) factory. WrappedComponent : typeof WrappedComponent
The lifecycle of the intl object is typically tied to the locale & the list of messages that it contains, which means when you switch locale, this object should be recreated.įunction injectIntl = WrappedComponentProps The core of react-intl is the intl object (of type IntlShape), which is the instance to store a cache of all Intl.* APIs, configurations, compiled messages and such. High performance scenarios where the number of React components rendered becomes the bottleneck (e.g Finance stock portfolio rendering, virtual tables with a lot of cells.).in non-React environment such as Node, Server API, Redux store, testing. Setting text attributes such as title, aria-label and the like where a React component cannot be used (e.g ).While our components provide a seamless integration with React, the imperative API are recommended (sometimes required) in several use cases:
When using React Intl you'll be interacting with its API (documented here) and its React components. There are a few API layers that React Intl provides and is built on.