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.