ListFormat#

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.

Relevant links#

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 format property of the ListFormat component.

Related components#

ListFormat is part of the Content category. Other components for similar needs:

Accordion — to let people open and close sections of related content.
Avatar — to make a person, company, or profile easier to recognize.
Card — to group related content in a clear, separated area.
CountryFlag — to show a country by its flag from an ISO country code.
DateFormat — to show dates in the correct DNB format.
Heading — to create accessible page headings with the correct level.

See all in Content →

Demos#

Basic usage with `value`#

A, B, C, D, 123, Link to Eufemia's Github Repo og Text Info Text

<ListFormat
  value={[
    <Fragment key="a">A</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

<ListFormat>
  <Fragment key="a">A</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

<Provider locale="en-GB">
  <ListFormat
    value={[
      <Fragment key="a">A</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

<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:

Unordered List:

<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:

Ordered List A:

Ordered List i:

Ordered List I:

Unordered List square:

Unordered List circle:

Unordered List unstyled:

<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

{
  listFormat(
    [
      <Fragment key="a">A</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',
    }
  )
}

Suggest an edit