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

Formatting only

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

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


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.

Demos

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,
    <a
      target="_blank"
      href="https://github.com/dnbexperience/eufemia"
      className="dnb-anchor"
      rel="noopener noreferrer"
      key="github"
    >
      Link to Eufemia's Github Repo
    </a>,
    <>
      Text <Badge content="Info" variant="information" /> Text
    </>,
  ]}
/>

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,
      <a
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        className="dnb-anchor"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </a>,
      <>
        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,
      <a
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        className="dnb-anchor"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </a>,
      <>
        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
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"
/>

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,
      <a
        target="_blank"
        href="https://github.com/dnbexperience/eufemia"
        className="dnb-anchor"
        rel="noopener noreferrer"
        key="github"
      >
        Link to Eufemia's Github Repo
      </a>,
      <>
        Text <Badge content="Info" variant="information" /> Text
      </>,
    ],
    {
      format: {
        type: 'disjunction',
      },
      locale: 'en-US',
    },
  )
}