Logo for jsDocs.io

react-intl

  • Version 7.0.4
  • Published
  • 233 kB
  • 8 dependencies
  • BSD-3-Clause license

Install

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

Overview

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

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

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<Intl.DisplayNamesOptions & { value: string }>;

          variable FormattedList

          const FormattedList: React.FC<
              Intl.ListFormatOptions & { value: readonly React.ReactNode[] }
          >;

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

                                Functions

                                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: (this: void) => IntlShape;

                                        Classes

                                        class IntlProvider

                                        class IntlProvider extends React.PureComponent<
                                            React.PropsWithChildren<IntlConfig>,
                                            State
                                        > {}

                                          property defaultProps

                                          static defaultProps: DefaultIntlConfig;

                                            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: () => React.JSX.Element;

                                                    Interfaces

                                                    interface IntlShape

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

                                                      property formatters

                                                      formatters: Formatters;

                                                        method formatMessage

                                                        formatMessage: {
                                                            (
                                                                this: void,
                                                                descriptor: MessageDescriptor,
                                                                values?: Record<
                                                                    string,
                                                                    PrimitiveType | FormatXMLElementFn<string, string>
                                                                >,
                                                                opts?: IntlMessageFormatOptions
                                                            ): string;
                                                            (
                                                                this: void,
                                                                descriptor: MessageDescriptor,
                                                                values?: Record<string, any>,
                                                                opts?: IntlMessageFormatOptions
                                                            ): React.ReactNode[];
                                                        };

                                                          interface ResolvedIntlConfig

                                                          interface ResolvedIntlConfig extends CoreResolvedIntlConfig<React.ReactNode> {}

                                                            property textComponent

                                                            textComponent?: React.ComponentType | keyof React.JSX.IntrinsicElements;

                                                              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 (8)

                                                                      Dev Dependencies (0)

                                                                      No dev dependencies.

                                                                      Peer Dependencies (2)

                                                                      Badge

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

                                                                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-intl.

                                                                      • Markdown
                                                                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-intl)
                                                                      • HTML
                                                                        <a href="https://www.jsdocs.io/package/react-intl"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>