• Version 6.6.8
  • Published
  • 242 kB
  • 10 dependencies
  • BSD-3-Clause license


npm i react-intl
yarn add react-intl
pnpm add react-intl


Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.



variable createIntl

const createIntl: CreateIntlFn<React.ReactNode, IntlConfig, IntlShape>;
  • Create intl object

    Parameter config

    intl config

    Parameter cache

    cache for formatter instances to prevent memory leak

variable FormattedDate

const FormattedDate: React.FC<any>;

    variable FormattedDateParts

    const FormattedDateParts: React.FC<any>;

      variable FormattedDateTimeRange

      const FormattedDateTimeRange: React.FC<Props>;

        variable FormattedDisplayName

        const FormattedDisplayName: React.FC<any>;

          variable FormattedList

          const FormattedList: React.FC<any>;

            variable FormattedListParts

            const FormattedListParts: React.FC<any>;

              variable FormattedMessage

              const FormattedMessage: React.ComponentType<Props<Record<string, any>>>;

                variable FormattedNumber

                const FormattedNumber: React.FC<any>;

                  variable FormattedNumberParts

                  const FormattedNumberParts: React.FC<any>;

                    variable FormattedPlural

                    const FormattedPlural: React.FC<Props>;

                      variable FormattedRelativeTime

                      const FormattedRelativeTime: React.FC<Props>;

                        variable FormattedTime

                        const FormattedTime: React.FC<any>;

                          variable FormattedTimeParts

                          const FormattedTimeParts: React.FC<any>;

                            variable IntlContext

                            const IntlContext: React.Context<IntlShape>;

                              variable RawIntlProvider

                              const RawIntlProvider: React.Provider<IntlShape>;


                                function defineMessage

                                defineMessage: <T extends MessageDescriptor>(msg: T) => T;

                                  function defineMessages

                                  defineMessages: <
                                  K extends string | number | symbol,
                                  T = MessageDescriptor,
                                  U extends Record<K, T> = Record<K, T>
                                  msgs: U
                                  ) => U;

                                    function injectIntl

                                    injectIntl: {
                                    IntlPropName extends string = 'intl',
                                    P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>
                                    WrappedComponent: React.ComponentType<P>,
                                    options?: Opts<IntlPropName, false>
                                    ): React.FC<WithIntlProps<P>> & { WrappedComponent: React.ComponentType<P> };
                                    IntlPropName extends string = 'intl',
                                    P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
                                    T extends React.ComponentType<P> = any
                                    WrappedComponent: React.ComponentType<P>,
                                    options?: Opts<IntlPropName, true>
                                    ): any;

                                      function useIntl

                                      useIntl: () => IntlShape;


                                        class IntlProvider

                                        class IntlProvider extends React.PureComponent<
                                        > {}

                                          property defaultProps

                                          static defaultProps: Pick<
                                          | 'timeZone'
                                          | 'onError'
                                          | 'fallbackOnEmptyString'
                                          | 'formats'
                                          | 'messages'
                                          | 'defaultLocale'
                                          | 'defaultFormats'
                                          | 'textComponent'

                                            property displayName

                                            static displayName: string;

                                              property state

                                              state: State;

                                                method getDerivedStateFromProps

                                                static getDerivedStateFromProps: (
                                                props: Readonly<IntlConfig>,
                                                { prevConfig, cache }: State
                                                ) => Partial<State> | null;

                                                  method render

                                                  render: () => JSX.Element;


                                                    interface IntlShape

                                                    interface IntlShape extends ResolvedIntlConfig, IntlFormatters<React.ReactNode> {}

                                                      property formatters

                                                      formatters: Formatters;

                                                        interface ResolvedIntlConfig

                                                        interface ResolvedIntlConfig extends CoreResolvedIntlConfig<React.ReactNode> {}

                                                          property textComponent

                                                          textComponent?: React.ComponentType | keyof React.ReactHTML;

                                                            property wrapRichTextChunksInFragment

                                                            wrapRichTextChunksInFragment?: boolean;

                                                              Type Aliases

                                                              type IntlConfig

                                                              type IntlConfig = Omit<ResolvedIntlConfig, keyof typeof DEFAULT_INTL_CONFIG> &
                                                              Partial<typeof DEFAULT_INTL_CONFIG>;

                                                                type WithIntlProps

                                                                type WithIntlProps<P> = DistributedOmit<P, keyof WrappedComponentProps> & {
                                                                forwardedRef?: React.Ref<any>;

                                                                  type WrappedComponentProps

                                                                  type WrappedComponentProps<IntlPropName extends string = 'intl'> = {
                                                                  [k in IntlPropName]: IntlShape;

                                                                    Package Files (11)

                                                                    Dependencies (10)

                                                                    Dev Dependencies (2)

                                                                    Peer Dependencies (2)


                                                                    To add a badge like this badgeto your package's README, use the codes available below.

                                                                    You may also use to create a custom badge linking to

                                                                    • Markdown
                                                                    • HTML
                                                                      <a href=""><img src="" alt=""></a>