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 text (default), the browser API Intl.ListFormat will be used with additional React components (JSX) support.

When the variant 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, to format strings, numbers, or React components (JSX) as a string. It does not return lists(ol, ul, etc).

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. The function does not support variant and listType, as it does not return a list, but rather return a string.

Demos

Basic usage with value

A, B, C, D, 123, Link to Eufemia's Github Repo og Text Info Text
Code Editor
<ListFormat
  value={[
    <React.Fragment key="a">A</React.Fragment>,
    <>
      <b>B</b>
    </>,
    <>C</>,
    'D',
    123,
    <Anchor
      target="_blank"
      href="https://github.com/dnbexperience/eufemia"
      rel="noopener noreferrer"
      key="github"
    >
      Link to Eufemia's Github Repo
    </Anchor>,
    <>
      Text <Badge content="Info" variant="information" /> Text
    </>,
  ]}
/>

Basic usage with children

A, B, C, D, 123, Link to Eufemia's Github Repo og Text Info Text
Code Editor
<ListFormat>
  <React.Fragment key="a">A</React.Fragment>
  <>
    <b>B</b>
  </>
  <>C</>
  <>D</>
  123
  <Anchor
    target="_blank"
    href="https://github.com/dnbexperience/eufemia"
    rel="noopener noreferrer"
    key="github"
  >
    Link to Eufemia's Github Repo
  </Anchor>
  <>
    Text <Badge content="Info" variant="information" /> Text
  </>
</ListFormat>

Custom format

A, B, C, D, 123, Link to Eufemia's Github Repo or Text Info Text
Code Editor
<Provider locale="en-GB">
  <ListFormat
    value={[
      <React.Fragment key="a">A</React.Fragment>,
      <>
        <b>B</b>
      </>,
      <>C</>,
      'D',
      123,
      <Anchor
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </Anchor>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ]}
    format={{
      type: 'disjunction',
    }}
  />
</Provider>

Inline

This is before the component 123, Link to Eufemia's Github Repo og Text Info Text This is after the component

Code Editor
<P>
  This is before the component{' '}
  <ListFormat
    value={[
      123,
      <Anchor
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </Anchor>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ]}
  />{' '}
  This is after the component
</P>

List variants

Ordered List:

  1. Foo
  2. Bar
  3. Baz

Unordered List:

  • Foo
  • Bar
  • Baz
Code Editor
<P>Ordered List:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" />
<P>Unordered List:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ul" />

List types

Ordered List a:

  1. Foo
  2. Bar
  3. Baz

Ordered List A:

  1. Foo
  2. Bar
  3. Baz

Ordered List i:

  1. Foo
  2. Bar
  3. Baz

Ordered List I:

  1. Foo
  2. Bar
  3. Baz

Unordered List square:

  • Foo
  • Bar
  • Baz

Unordered List circle:

  • Foo
  • Bar
  • Baz

Unordered List unstyled:

  • Foo
  • Bar
  • Baz
Code Editor
<P>Ordered List a:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="a" />
<P>Ordered List A:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="A" />
<P>Ordered List i:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="i" />
<P>Ordered List I:</P>
<ListFormat value={['Foo', 'Bar', 'Baz']} variant="ol" listType="I" />
<P>Unordered List square:</P>
<ListFormat
  value={['Foo', 'Bar', 'Baz']}
  variant="ul"
  listType="square"
/>
<P>Unordered List circle:</P>
<ListFormat
  value={['Foo', 'Bar', 'Baz']}
  variant="ul"
  listType="circle"
/>
<P>Unordered List unstyled:</P>
<ListFormat
  value={['Foo', 'Bar', 'Baz']}
  variant="ul"
  listType="unstyled"
/>

Using listFormat function

A, B, C, D, 123, Link to Eufemia's Github Repo, or Text Info Text
Code Editor
{
  listFormat(
    [
      <React.Fragment key="a">A</React.Fragment>,
      <>
        <b>B</b>
      </>,
      <>C</>,
      'D',
      123,
      <Anchor
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </Anchor>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ],
    {
      format: {
        type: 'disjunction',
      },
      locale: 'en-US',
    },
  )
}