List formatting

When working with lists of items, you might want to format them as conjunctions or disjunctions.

Formatting aspects, like the used separators, differ per locale:

• "HTML, CSS, and JavaScript" in en-US
• "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'});
 
  // Renders "HTML, CSS, or JavaScript"
  format.list(items, {type: 'disjunction'});
}

See the MDN docs about ListFormat (opens in a new tab) to learn more about the options that you can provide to the list function or try the interactive explorer for Intl.ListFormat (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.