react-intl 3.11.0 → 3.12.0

package/dist/types.d.ts

@@ -4,6 +4,7 @@ import IntlRelativeTimeFormat, { IntlRelativeTimeFormatOptions } from '@formatjs
 import { MessageFormatElement } from 'intl-messageformat-parser';
 import { UnifiedNumberFormatOptions } from '@formatjs/intl-unified-numberformat';
 import IntlListFormat, { IntlListFormatOptions } from '@formatjs/intl-listformat';
+import { DisplayNames, DisplayNamesOptions } from '@formatjs/intl-displaynames';
 export interface IntlConfig {
     locale: string;
     timeZone?: string;
@@ -25,6 +26,7 @@ export declare type FormatNumberOptions = Exclude<UnifiedNumberFormatOptions, 'l
 export declare type FormatRelativeTimeOptions = Exclude<IntlRelativeTimeFormatOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatPluralOptions = Exclude<Intl.PluralRulesOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
+export declare type FormatDisplayNameOptions = Exclude<DisplayNamesOptions, 'localeMatcher'>;
 export interface IntlFormatters {
     formatDate(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
     formatTime(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
@@ -39,6 +41,7 @@ export interface IntlFormatters {
     formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
     formatList(values: Array<string>, opts?: FormatListOptions): string;
     formatList(values: Array<string | React.ReactNode>, opts?: FormatListOptions): React.ReactNode;
+    formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
 }
 export interface Formatters {
     getDateTimeFormat(...args: ConstructorParameters<typeof Intl.DateTimeFormat>): Intl.DateTimeFormat;
@@ -47,6 +50,7 @@ export interface Formatters {
     getRelativeTimeFormat(...args: ConstructorParameters<typeof IntlRelativeTimeFormat>): IntlRelativeTimeFormat;
     getPluralRules(...args: ConstructorParameters<typeof Intl.PluralRules>): Intl.PluralRules;
     getListFormat(...args: ConstructorParameters<typeof IntlListFormat>): IntlListFormat;
+    getDisplayNames(...args: ConstructorParameters<typeof DisplayNames>): DisplayNames;
 }
 export interface IntlShape extends IntlConfig, IntlFormatters {
     formatters: Formatters;
@@ -58,6 +62,7 @@ export interface IntlCache {
     relativeTime: Record<string, IntlRelativeTimeFormat>;
     pluralRules: Record<string, Intl.PluralRules>;
     list: Record<string, IntlListFormat>;
+    displayNames: Record<string, DisplayNames>;
 }
 export interface MessageDescriptor {
     id?: string | number;

package/dist/utils.js

@@ -72,6 +72,7 @@ function createIntlCache() {
         relativeTime: {},
         pluralRules: {},
         list: {},
+        displayNames: {},
     };
 }
 exports.createIntlCache = createIntlCache;
@@ -83,6 +84,7 @@ function createFormatters(cache) {
     if (cache === void 0) { cache = createIntlCache(); }
     var RelativeTimeFormat = Intl.RelativeTimeFormat;
     var ListFormat = Intl.ListFormat;
+    var DisplayNames = Intl.DisplayNames;
     return {
         getDateTimeFormat: intl_format_cache_1.default(Intl.DateTimeFormat, cache.dateTime),
         getNumberFormat: intl_format_cache_1.default(Intl.NumberFormat, cache.number),
@@ -90,6 +92,7 @@ function createFormatters(cache) {
         getRelativeTimeFormat: intl_format_cache_1.default(RelativeTimeFormat, cache.relativeTime),
         getPluralRules: intl_format_cache_1.default(Intl.PluralRules, cache.pluralRules),
         getListFormat: intl_format_cache_1.default(ListFormat, cache.list),
+        getDisplayNames: intl_format_cache_1.default(DisplayNames, cache.displayNames),
     };
 }
 exports.createFormatters = createFormatters;

package/lib/components/createFormattedComponent.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { IntlShape, FormatDateOptions, FormatNumberOptions, FormatListOptions } from '../types';
+import { IntlShape, FormatDateOptions, FormatNumberOptions, FormatListOptions, FormatDisplayNameOptions } from '../types';
 declare type Formatter = {
     formatDate: FormatDateOptions;
     formatTime: FormatDateOptions;
     formatNumber: FormatNumberOptions;
     formatList: FormatListOptions;
+    formatDisplayName: FormatDisplayNameOptions;
 };
 export declare const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {
     value: Parameters<IntlShape['formatNumber']>[0];

package/lib/components/createFormattedComponent.js

@@ -18,6 +18,9 @@ var DisplayName;
     DisplayName["formatTime"] = "FormattedTime";
     DisplayName["formatNumber"] = "FormattedNumber";
     DisplayName["formatList"] = "FormattedList";
+    // Note that this DisplayName is the locale display name, not to be confused with
+    // the name of the enum, which is for React component display name in dev tools.
+    DisplayName["formatDisplayName"] = "FormattedDisplayName";
 })(DisplayName || (DisplayName = {}));
 var DisplayNameParts;
 (function (DisplayNameParts) {

package/lib/components/provider.js

@@ -14,6 +14,7 @@ import { formatPlural } from '../formatters/plural';
 import { formatMessage, formatHTMLMessage } from '../formatters/message';
 import * as shallowEquals_ from 'shallow-equal/objects';
 import { formatList } from '../formatters/list';
+import { formatDisplayName } from '../formatters/displayName';
 const shallowEquals = shallowEquals_.default || shallowEquals_;
 function processIntlConfig(config) {
     return {
@@ -49,7 +50,7 @@ export function createIntl(config, cache) {
         // each <FormattedMessage> contains a `defaultMessage` prop.
         resolvedConfig.locale = resolvedConfig.defaultLocale || 'en';
     }
-    return Object.assign(Object.assign({}, resolvedConfig), { formatters, formatNumber: formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: formatMessage.bind(null, resolvedConfig, formatters), formatHTMLMessage: formatHTMLMessage.bind(null, resolvedConfig, formatters), formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat) });
+    return Object.assign(Object.assign({}, resolvedConfig), { formatters, formatNumber: formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: formatMessage.bind(null, resolvedConfig, formatters), formatHTMLMessage: formatHTMLMessage.bind(null, resolvedConfig, formatters), formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat), formatDisplayName: formatDisplayName.bind(null, resolvedConfig, formatters.getDisplayNames) });
 }
 export default class IntlProvider extends React.PureComponent {
     constructor() {

package/lib/formatters/displayName.d.ts

@@ -0,0 +1,2 @@
+import { IntlConfig, Formatters, IntlFormatters } from '../types';
+export declare function formatDisplayName({ locale, onError }: Pick<IntlConfig, 'locale' | 'onError'>, getDisplayNames: Formatters['getDisplayNames'], value: Parameters<IntlFormatters['formatDisplayName']>[0], options?: Parameters<IntlFormatters['formatDisplayName']>[1]): string | undefined;

package/lib/formatters/displayName.js

@@ -0,0 +1,22 @@
+import { filterProps, createError } from '../utils';
+const DISPLAY_NAMES_OPTONS = [
+    'localeMatcher',
+    'style',
+    'type',
+    'fallback',
+];
+export function formatDisplayName({ locale, onError }, getDisplayNames, value, options = {}) {
+    const DisplayNames = Intl.DisplayNames;
+    if (!DisplayNames) {
+        onError(createError(`Intl.DisplayNames is not available in this environment.
+Try polyfilling it using "@formatjs/intl-displaynames"
+`));
+    }
+    const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS);
+    try {
+        return getDisplayNames(locale, filteredOptions).of(value);
+    }
+    catch (e) {
+        onError(createError('Error formatting display name.', e));
+    }
+}

package/lib/index.d.ts

@@ -4,6 +4,7 @@ export { defineMessages } from '@formatjs/macro';
 import { CustomFormatConfig } from './types';
 import { UnifiedNumberFormatOptions } from '@formatjs/intl-unified-numberformat';
 import { IntlListFormatOptions } from '@formatjs/intl-listformat';
+import { DisplayNamesOptions } from '@formatjs/intl-displaynames/lib';
 export { default as injectIntl, Provider as RawIntlProvider, Context as IntlContext, WithIntlProps, WrappedComponentProps, } from './components/injectIntl';
 export { default as useIntl } from './components/useIntl';
 export { default as IntlProvider, createIntl } from './components/provider';
@@ -19,6 +20,9 @@ export declare const FormattedNumber: React.FC<UnifiedNumberFormatOptions & Cust
 export declare const FormattedList: React.FC<IntlListFormatOptions & {
     value: React.ReactNode[];
 }>;
+export declare const FormattedDisplayName: React.FC<DisplayNamesOptions & {
+    value: string | number | object;
+}>;
 export declare const FormattedDateParts: React.FC<Intl.DateTimeFormatOptions & CustomFormatConfig & {
     value: string | number | Date | undefined;
     children(val: Intl.DateTimeFormatPart[]): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;

package/lib/index.js

@@ -8,6 +8,7 @@ export const FormattedDate = createFormattedComponent('formatDate');
 export const FormattedTime = createFormattedComponent('formatTime');
 export const FormattedNumber = createFormattedComponent('formatNumber');
 export const FormattedList = createFormattedComponent('formatList');
+export const FormattedDisplayName = createFormattedComponent('formatDisplayName');
 export const FormattedDateParts = createFormattedDateTimePartsComponent('formatDate');
 export const FormattedTimeParts = createFormattedDateTimePartsComponent('formatTime');
 export { FormattedNumberParts } from './components/createFormattedComponent';

package/lib/react-intl.d.ts

@@ -1,4 +1,7 @@
 import { defineMessages } from '@formatjs/macro';
+import { DisplayNames } from '@formatjs/intl-displaynames';
+import { DisplayNamesOptions } from '@formatjs/intl-displaynames';
+import { DisplayNamesOptions as DisplayNamesOptions_2 } from '@formatjs/intl-displaynames/lib';
 import { Formats } from 'intl-messageformat';
 import { FormatXMLElementFn } from 'intl-messageformat';
 import IntlListFormat from '@formatjs/intl-listformat';
@@ -34,6 +37,8 @@ export { defineMessages }
 
 export declare type FormatDateOptions = Exclude<Intl.DateTimeFormatOptions, 'localeMatcher'> & CustomFormatConfig;
 
+export declare type FormatDisplayNameOptions = Exclude<DisplayNamesOptions, 'localeMatcher'>;
+
 export declare type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
 
 export declare type FormatNumberOptions = Exclude<UnifiedNumberFormatOptions, 'localeMatcher'> & CustomFormatConfig;
@@ -51,6 +56,10 @@ export declare const FormattedDateParts: React.FC<Intl.DateTimeFormatOptions & C
     children(val: Intl.DateTimeFormatPart[]): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 }>;
 
+export declare const FormattedDisplayName: React.FC<DisplayNamesOptions_2 & {
+    value: string | number | object;
+}>;
+
 export declare class FormattedHTMLMessage extends FormattedMessage<Record<string, PrimitiveType>> {
     static displayName: string;
     static defaultProps: {
@@ -116,6 +125,7 @@ declare type Formatter = {
     formatTime: FormatDateOptions;
     formatNumber: FormatNumberOptions;
     formatList: FormatListOptions;
+    formatDisplayName: FormatDisplayNameOptions;
 };
 
 export declare interface Formatters {
@@ -125,6 +135,7 @@ export declare interface Formatters {
     getRelativeTimeFormat(...args: ConstructorParameters<typeof IntlRelativeTimeFormat>): IntlRelativeTimeFormat;
     getPluralRules(...args: ConstructorParameters<typeof Intl.PluralRules>): Intl.PluralRules;
     getListFormat(...args: ConstructorParameters<typeof IntlListFormat>): IntlListFormat;
+    getDisplayNames(...args: ConstructorParameters<typeof DisplayNames>): DisplayNames;
 }
 
 export declare function injectIntl<IntlPropName extends string, P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>>(WrappedComponent: React.ComponentType<P>, options?: Opts<IntlPropName, false>): React.FC<WithIntlProps<P>> & {
@@ -142,6 +153,7 @@ export declare interface IntlCache {
     relativeTime: Record<string, IntlRelativeTimeFormat>;
     pluralRules: Record<string, Intl.PluralRules>;
     list: Record<string, IntlListFormat>;
+    displayNames: Record<string, DisplayNames>;
 }
 
 export declare interface IntlConfig {
@@ -171,6 +183,7 @@ export declare interface IntlFormatters {
     formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
     formatList(values: Array<string>, opts?: FormatListOptions): string;
     formatList(values: Array<string | React.ReactNode>, opts?: FormatListOptions): React.ReactNode;
+    formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
 }
 
 export declare class IntlProvider extends React.PureComponent<OptionalIntlConfig, State> {

package/lib/types.d.ts

@@ -4,6 +4,7 @@ import IntlRelativeTimeFormat, { IntlRelativeTimeFormatOptions } from '@formatjs
 import { MessageFormatElement } from 'intl-messageformat-parser';
 import { UnifiedNumberFormatOptions } from '@formatjs/intl-unified-numberformat';
 import IntlListFormat, { IntlListFormatOptions } from '@formatjs/intl-listformat';
+import { DisplayNames, DisplayNamesOptions } from '@formatjs/intl-displaynames';
 export interface IntlConfig {
     locale: string;
     timeZone?: string;
@@ -25,6 +26,7 @@ export declare type FormatNumberOptions = Exclude<UnifiedNumberFormatOptions, 'l
 export declare type FormatRelativeTimeOptions = Exclude<IntlRelativeTimeFormatOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatPluralOptions = Exclude<Intl.PluralRulesOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
+export declare type FormatDisplayNameOptions = Exclude<DisplayNamesOptions, 'localeMatcher'>;
 export interface IntlFormatters {
     formatDate(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
     formatTime(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
@@ -39,6 +41,7 @@ export interface IntlFormatters {
     formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
     formatList(values: Array<string>, opts?: FormatListOptions): string;
     formatList(values: Array<string | React.ReactNode>, opts?: FormatListOptions): React.ReactNode;
+    formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
 }
 export interface Formatters {
     getDateTimeFormat(...args: ConstructorParameters<typeof Intl.DateTimeFormat>): Intl.DateTimeFormat;
@@ -47,6 +50,7 @@ export interface Formatters {
     getRelativeTimeFormat(...args: ConstructorParameters<typeof IntlRelativeTimeFormat>): IntlRelativeTimeFormat;
     getPluralRules(...args: ConstructorParameters<typeof Intl.PluralRules>): Intl.PluralRules;
     getListFormat(...args: ConstructorParameters<typeof IntlListFormat>): IntlListFormat;
+    getDisplayNames(...args: ConstructorParameters<typeof DisplayNames>): DisplayNames;
 }
 export interface IntlShape extends IntlConfig, IntlFormatters {
     formatters: Formatters;
@@ -58,6 +62,7 @@ export interface IntlCache {
     relativeTime: Record<string, IntlRelativeTimeFormat>;
     pluralRules: Record<string, Intl.PluralRules>;
     list: Record<string, IntlListFormat>;
+    displayNames: Record<string, DisplayNames>;
 }
 export interface MessageDescriptor {
     id?: string | number;

package/lib/utils.js

@@ -64,6 +64,7 @@ export function createIntlCache() {
         relativeTime: {},
         pluralRules: {},
         list: {},
+        displayNames: {},
     };
 }
 /**
@@ -73,6 +74,7 @@ export function createIntlCache() {
 export function createFormatters(cache = createIntlCache()) {
     const RelativeTimeFormat = Intl.RelativeTimeFormat;
     const ListFormat = Intl.ListFormat;
+    const DisplayNames = Intl.DisplayNames;
     return {
         getDateTimeFormat: memoizeIntlConstructor(Intl.DateTimeFormat, cache.dateTime),
         getNumberFormat: memoizeIntlConstructor(Intl.NumberFormat, cache.number),
@@ -80,6 +82,7 @@ export function createFormatters(cache = createIntlCache()) {
         getRelativeTimeFormat: memoizeIntlConstructor(RelativeTimeFormat, cache.relativeTime),
         getPluralRules: memoizeIntlConstructor(Intl.PluralRules, cache.pluralRules),
         getListFormat: memoizeIntlConstructor(ListFormat, cache.list),
+        getDisplayNames: memoizeIntlConstructor(DisplayNames, cache.displayNames),
     };
 }
 export function getNamedFormat(formats, type, name, onError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "description": "Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.",
   "keywords": [
     "intl",
@@ -131,6 +131,7 @@
   "types": "./lib/react-intl.d.ts",
   "sideEffects": false,
   "dependencies": {
+    "@formatjs/intl-displaynames": "^1.2.0",
     "@formatjs/intl-listformat": "^1.3.7",
     "@formatjs/intl-relativetimeformat": "^4.5.7",
     "@formatjs/intl-unified-numberformat": "^3.0.4",

package/src/components/createFormattedComponent.tsx

@@ -5,6 +5,7 @@ import {
   FormatDateOptions,
   FormatNumberOptions,
   FormatListOptions,
+  FormatDisplayNameOptions,
 } from '../types';
 import {Context} from './injectIntl';
 
@@ -13,6 +14,9 @@ enum DisplayName {
   formatTime = 'FormattedTime',
   formatNumber = 'FormattedNumber',
   formatList = 'FormattedList',
+  // Note that this DisplayName is the locale display name, not to be confused with
+  // the name of the enum, which is for React component display name in dev tools.
+  formatDisplayName = 'FormattedDisplayName',
 }
 
 enum DisplayNameParts {
@@ -27,6 +31,7 @@ type Formatter = {
   formatTime: FormatDateOptions;
   formatNumber: FormatNumberOptions;
   formatList: FormatListOptions;
+  formatDisplayName: FormatDisplayNameOptions;
 };
 
 export const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {

package/src/components/provider.tsx

@@ -27,6 +27,7 @@ import {formatPlural} from '../formatters/plural';
 import {formatMessage, formatHTMLMessage} from '../formatters/message';
 import * as shallowEquals_ from 'shallow-equal/objects';
 import {formatList} from '../formatters/list';
+import {formatDisplayName} from '../formatters/displayName';
 const shallowEquals: typeof shallowEquals_ =
   (shallowEquals_ as any).default || shallowEquals_;
 
@@ -146,6 +147,11 @@ export function createIntl(
     formatMessage: formatMessage.bind(null, resolvedConfig, formatters),
     formatHTMLMessage: formatHTMLMessage.bind(null, resolvedConfig, formatters),
     formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat),
+    formatDisplayName: formatDisplayName.bind(
+      null,
+      resolvedConfig,
+      formatters.getDisplayNames
+    ),
   };
 }
 

package/src/formatters/displayName.ts

@@ -0,0 +1,35 @@
+import {IntlConfig, Formatters, IntlFormatters} from '../types';
+import {filterProps, createError} from '../utils';
+import {
+  DisplayNamesOptions,
+  DisplayNames as IntlDisplayNames,
+} from '@formatjs/intl-displaynames';
+
+const DISPLAY_NAMES_OPTONS: Array<keyof DisplayNamesOptions> = [
+  'localeMatcher',
+  'style',
+  'type',
+  'fallback',
+];
+
+export function formatDisplayName(
+  {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
+  getDisplayNames: Formatters['getDisplayNames'],
+  value: Parameters<IntlFormatters['formatDisplayName']>[0],
+  options: Parameters<IntlFormatters['formatDisplayName']>[1] = {}
+): string | undefined {
+  const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames;
+  if (!DisplayNames) {
+    onError(
+      createError(`Intl.DisplayNames is not available in this environment.
+Try polyfilling it using "@formatjs/intl-displaynames"
+`)
+    );
+  }
+  const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS);
+  try {
+    return getDisplayNames(locale, filteredOptions).of(value);
+  } catch (e) {
+    onError(createError('Error formatting display name.', e));
+  }
+}

package/src/index.ts

@@ -13,6 +13,7 @@ import {
 import {CustomFormatConfig} from './types';
 import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
 import {IntlListFormatOptions} from '@formatjs/intl-listformat';
+import {DisplayNamesOptions} from '@formatjs/intl-displaynames/lib';
 export {
   default as injectIntl,
   Provider as RawIntlProvider,
@@ -38,6 +39,9 @@ export const FormattedNumber: React.FC<UnifiedNumberFormatOptions &
 export const FormattedList: React.FC<IntlListFormatOptions & {
   value: React.ReactNode[];
 }> = createFormattedComponent('formatList');
+export const FormattedDisplayName: React.FC<DisplayNamesOptions & {
+  value: string | number | object;
+}> = createFormattedComponent('formatDisplayName');
 export const FormattedDateParts = createFormattedDateTimePartsComponent(
   'formatDate'
 );

package/src/types.ts

@@ -15,6 +15,7 @@ import IntlRelativeTimeFormat, {
 import {MessageFormatElement} from 'intl-messageformat-parser';
 import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat';
 import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat';
+import {DisplayNames, DisplayNamesOptions} from '@formatjs/intl-displaynames';
 
 export interface IntlConfig {
   locale: string;
@@ -58,6 +59,11 @@ export type FormatPluralOptions = Exclude<
 
 export type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
 
+export type FormatDisplayNameOptions = Exclude<
+  DisplayNamesOptions,
+  'localeMatcher'
+>;
+
 export interface IntlFormatters {
   formatDate(
     value: Parameters<Intl.DateTimeFormat['format']>[0] | string,
@@ -107,14 +113,15 @@ export interface IntlFormatters {
     descriptor: MessageDescriptor,
     values?: Record<string, PrimitiveType>
   ): React.ReactNode;
-  formatList(
-    values: Array<string>,
-    opts?: FormatListOptions
-  ): string;
+  formatList(values: Array<string>, opts?: FormatListOptions): string;
   formatList(
     values: Array<string | React.ReactNode>,
     opts?: FormatListOptions
   ): React.ReactNode;
+  formatDisplayName(
+    value: Parameters<DisplayNames['of']>[0],
+    opts?: FormatDisplayNameOptions
+  ): string | undefined;
 }
 
 export interface Formatters {
@@ -136,6 +143,9 @@ export interface Formatters {
   getListFormat(
     ...args: ConstructorParameters<typeof IntlListFormat>
   ): IntlListFormat;
+  getDisplayNames(
+    ...args: ConstructorParameters<typeof DisplayNames>
+  ): DisplayNames;
 }
 
 export interface IntlShape extends IntlConfig, IntlFormatters {
@@ -149,6 +159,7 @@ export interface IntlCache {
   relativeTime: Record<string, IntlRelativeTimeFormat>;
   pluralRules: Record<string, Intl.PluralRules>;
   list: Record<string, IntlListFormat>;
+  displayNames: Record<string, DisplayNames>;
 }
 
 export interface MessageDescriptor {

package/src/utils.ts

@@ -13,7 +13,7 @@ import {IntlConfig, IntlCache, CustomFormats, Formatters} from './types';
 import * as React from 'react';
 import IntlMessageFormat from 'intl-messageformat';
 import memoizeIntlConstructor from 'intl-format-cache';
-import {invariant} from '@formatjs/intl-utils'
+import {invariant} from '@formatjs/intl-utils';
 import {IntlRelativeTimeFormatOptions} from '@formatjs/intl-relativetimeformat';
 
 const ESCAPED_CHARS: Record<number, string> = {
@@ -97,6 +97,7 @@ export function createIntlCache(): IntlCache {
     relativeTime: {},
     pluralRules: {},
     list: {},
+    displayNames: {},
   };
 }
 
@@ -109,6 +110,7 @@ export function createFormatters(
 ): Formatters {
   const RelativeTimeFormat = (Intl as any).RelativeTimeFormat;
   const ListFormat = (Intl as any).ListFormat;
+  const DisplayNames = (Intl as any).DisplayNames;
   return {
     getDateTimeFormat: memoizeIntlConstructor(
       Intl.DateTimeFormat,
@@ -122,6 +124,7 @@ export function createFormatters(
     ),
     getPluralRules: memoizeIntlConstructor(Intl.PluralRules, cache.pluralRules),
     getListFormat: memoizeIntlConstructor(ListFormat, cache.list),
+    getDisplayNames: memoizeIntlConstructor(DisplayNames, cache.displayNames),
   };
 }