Display names

When you need to display locale-aware names for regions, languages, currencies, or scripts, you can use the displayName function from the useFormatter hook.

The output adapts to the current locale automatically:

• “United States” in en-US
• “États-Unis” in fr-FR
• “Vereinigte Staaten” in de-DE

Formatting display names

import {useFormatter} from 'next-intl';
 
function Component() {
  const format = useFormatter();
 
  // Renders "United States"
  format.displayName('US', {type: 'region'});
 
  // Renders "English"
  format.displayName('en', {type: 'language'});
 
  // Renders "US Dollar"
  format.displayName('USD', {type: 'currency'});
 
  // Renders "Latin"
  format.displayName('Latn', {type: 'script'});
}

See the MDN docs about DisplayNames to learn more about the options you can pass to the displayName function.

Note that type is a required option. The accepted values depend on the runtime, but commonly supported types are: region, language, currency, and script.

If you have global formats configured, you can reference them by passing a name as the second argument:

// Use a global format
format.displayName('US', 'region');
 
// Optionally override some options
format.displayName('US', 'region', {style: 'narrow'});