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
value
Basic usage with <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 </>, ]} />
children
Basic usage with <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
<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
<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:
- Foo
- Bar
- Baz
Unordered List:
- Foo
- Bar
- Baz
<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:
- Foo
- Bar
- Baz
Ordered List A:
- Foo
- Bar
- Baz
Ordered List i:
- Foo
- Bar
- Baz
Ordered List I:
- Foo
- Bar
- Baz
Unordered List square:
- Foo
- Bar
- Baz
Unordered List circle:
- Foo
- Bar
- Baz
Unordered List unstyled:
- Foo
- Bar
- Baz
<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
{ 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', }, ) }