intlList

intlList(value, options?) builds a localized list string from multiple values. Use it for breadcrumb-like segments, summaries, or UI helper text like shipping/payment terms.

It maps directly to: Intl.ListFormat

Input shape

value can be:

ts
1import { intlList } from '@beforesemicolon/intl'2 3intlList(['shipping', 'tax', 'discounts'])4intlList('shipping tax discounts')

Signature

ts
1function intlList(2  value: string[] | string,3  options?: {4    locale?: string5    scope?: IntlRuntime6    type?: 'conjunction' | 'disjunction' | 'unit' | 'and' | 'or' | 'none'7    style?: 'long' | 'short' | 'narrow'8    localeMatcher?: 'lookup' | 'best fit'9  }10): string

Invalid or empty input returns ''.

Option map

OptionTypeDefaultEffect
localestringruntime localeLocale for this list
scopeIntlRuntimegetIntl()Use scoped runtime for locale fallback
typeconjunction | disjunction | unit | and | or | noneconjunctionGrammar behavior
stylelong | short | narrowlongFull vs compact list text
localeMatcherlookup | best fitbest fitLocale negotiation algorithm

and, or, and none are convenience aliases for conjunction, disjunction, and unit behavior.

Examples

Default behavior

ts
1intlList(['A', 'B', 'C'])2intlList('A B C', { locale: 'en-US' })

Type variations

ts
1intlList(['A', 'B', 'C'], { type: 'conjunction', style: 'long' }) // and2intlList(['A', 'B', 'C'], { type: 'or', style: 'short' }) // or3intlList(['A', 'B', 'C'], { type: 'none', style: 'narrow' }) // punctuation only

Scope and locale overrides

ts
1import { createIntl, intlList } from '@beforesemicolon/intl'2 3const scoped = createIntl({ locale: 'fr-FR', messages: {} })4 5intlList(['A', 'B', 'C'], { scope: scoped })6intlList('A B C', { locale: 'de-DE', style: 'short' })

Empty output rules

ts
1intlList([]) // ''2intlList('') // ''

See also

edit this doc