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.
💡
To reuse list formats for multiple components, you can configure global formats.
How can I render an array of messages?
See the arrays of messages guide.