Skip to content
Home

ListFormat

Info
Demos
Properties

Import

import { ListFormat } from '@dnb/eufemia'

Description

A ready-to-use list formatter. Use it wherever you have to display a list of strings, numbers, or React components (JSX).

Good reasons for why we have this is to:

  • Uniform the creation and formatting of lists.
  • Supports translation and localization.
  • Built on top of web standards.

The component is designed to maximum display 10-20 items. If you need to display more items than that, consider a different design, and perhaps using Pagination and/or InfinityScroller When the variant property is set to a non-text variant, it uses Lists to render the given list.

Formatting only

You can use the listFormat function without using the React Component ListFormat.

import { listFormat } from '@dnb/eufemia/components/ListFormat'


return listFormat(myList, {
  format: { type: 'disjunction' },
  locale: 'en-US',
})

See the following demo for a more detailed example.

The listFormat function supports an object with { format, locale } as the second parameter. format and locale will accept the same values as documented in properties of the ListFormat component.