List

an ordered list of items

  • Alan
    20
  • Bryan
    30
  • Chris
    40
  • Eric
    80

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

action

Accepts a function that allows for a custom rendering of a component, it should be passed with an item and index of an array and return a react element action = ({item, index}) => <Content /> />

"function"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"
"center"
"end"
"stretch"

as

The DOM tag or react component to use for the element.
"ul"

background

Item background. An array value indicates that items should have different backgrounds, modulo the array index.

"light-2"
["white", "light-2"]

border

Item border.
true
"horizontal"
{
  "color": "border",
  "side": "horizontal",
  "size": "small"
}

children

Function that will be called when each data item is rendered. It will be passed three arguments, the individual data item, its index, and an object indicating the state of the item, if any. It should return a react element. For example: children={(item, index, { active }) =&gt; &lt;Box ...>{...}</Box>}

(datum, index, { active }) => {...}

data

Array of data objects.
[
"string"
{
""
}
]

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

itemProps

Item specific background, border, and pad, keyed by data index. For example: { 27: { background: ..., border: ..., pad: ... }}, where the background, border, and pad accept the same values as the same named properties on List.

{
""
}

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onClickItem

When supplied, this function will be called with an event object that include a 'item' property containing the data value associated with the clicked item and an 'index' property containing the index in 'data' of the clicked item. You should not include interactive elements, like Anchor or Button inside 'primaryKey' or 'secondaryKey' as that can cause confusion with overlapping interactive elements.

({ datum, index }) => {...}

onMore

Use this to indicate that 'data' doesn't contain all that it could. It will be called when all of the data items have been rendered. This might be used when the total number of items that could be retrieved is more than you'd want to load into the browser. 'onMore' allows you to lazily fetch more from the server only when needed.

() => {...}

pad

Item padding.
"xxsmall""xsmall""small""medium""large""xlarge""string"
{
horizontal:
"xxsmall""xsmall""small""medium""large""xlarge,"
vertical:
"xxsmall""xsmall""small""medium""large""xlarge,"
top:
"xxsmall""xsmall""small""medium""large""xlarge,"
bottom:
"xxsmall""xsmall""small""medium""large""xlarge,"
left:
"xxsmall""xsmall""small""medium""large""xlarge,"
right:
"xxsmall""xsmall""small""medium""large""xlarge,"
start:
"xxsmall""xsmall""small""medium""large""xlarge,"
end:
"xxsmall""xsmall""small""medium""large""xlarge"
}

primaryKey

When a string is supplied, it indicates the property in a data item object to use to get the primary content. If a function is supplied, it will be called with the current data item object and should return a React element that will be rendered as the primary content.

"string""function"

secondaryKey

When a string is supplied, it indicates the property in a data item object to use to get the secondary content. If a function is supplied, it will be called with the current data item object and should return a React element that will be rendered as the secondary content.

"string""function"

step

How many items to render at a time.
50

Theme

global.hover.background

The background style when hovering over an interactive item.
{"color": "active", "opacity": "medium"}

global.hover.color

The text color when hovering over an interactive item.
{"dark": "white", "light": "black"}

list.extend

Any additional style for the list.
"any CSS"
(props) => {}

list.item.background

Background color for list items.
string | [string]

list.item.border

Border for list items.
"horizontal"

list.item.pad

Border for list items.
{
  "horizontal": "medium",
  "vertical": "small"
}

list.item.extend

Any additional style for the list items.
"any CSS"
(props) => {}