Docs
Usage guide
Lists

List formatting

Depending on the users locale, lists of items should be formatted differently (e.g. "HTML, CSS, and JavaScript" in en-US vs. "HTML, CSS und JavaScript" in de-DE).

List formatting can be applied with the useFormatter hook:

import {useFormatter} from 'next-intl';
 
function Component() {
  const format = useFormatter();
  const items = ['HTML', 'CSS', 'JavaScript'];
 
  // Renders "HTML, CSS, and JavaScript"
  format.list(items, {type: 'conjunction'});
}

See the MDN docs about ListFormat (opens in a new tab) to learn more about the options that you can provide to list (interactive explorer (opens in a new tab)).

Note that lists can can currently only be formatted via useFormatter, there's no equivalent inline syntax for messages at this point.

💡

To reuse list formats for multiple components, you can configure global formats.