Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

List

Lists are useful for rendering collections of documents or references, like emails, actions, documents, and so on.

Sancho exports the following components to create lists:

  • List: The wrapper component for ListItem and ListSection children.
  • ListSection: A labelled wrapper component for ListItem components.
  • ListItem: The list item itself.

Basic usage

<Layer style={{ overflow: "hidden", maxWidth: "100%", width: "450px" }}>
  <List>
    <ListItem
      contentBefore={<Avatar name={"Ben McMahen"} src={faker.image.avatar()} />}
      primary="Ben McMahen"
      secondary="Minim do minim cupidatat veniam aliquip sunt exercitation enim nisi nulla."
      contentAfter={<IconChevronRight />}
    />
    <ListItem
      contentBefore={<Avatar name={"Ben McMahen"} src={faker.image.avatar()} />}
      primary="Joe Chen"
      secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
      contentAfter={<IconChevronRight />}
    />
    <ListItem
      contentBefore={<Avatar name={"Lynn Apple"} src={faker.image.avatar()} />}
      primary="Lynn Apple"
      secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
      contentAfter={<IconChevronRight />}
    />
    <ListItem
      contentBefore={<Avatar name={"Mary Joe"} src={faker.image.avatar()} />}
      primary="Mary Joe"
      secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
      contentAfter={<IconChevronRight />}
    />
  </List>
</Layer>
My Chat App
<Layer className="List-example">
  <Toolbar className="List-toolbar">
    <Text gutter={false} variant="h6">
      My Chat App
    </Text>
  </Toolbar>
  <Component initialState={{ value: 0 }}>
    {({ state, setState }) => (
      <Tabs
        className="List-tabs"
        variant="evenly-spaced"
        onChange={i => setState({ value: i })}
        value={state.value}
      >
        <Tab>Family</Tab>
        <Tab>Work</Tab>
        <Tab>Favorites</Tab>
        <Tab>Groups</Tab>
      </Tabs>
    )}
  </Component>
  <div>
    <List>
      <ListItem
        contentBefore={
          <Avatar name={"Lynn Apple"} src={faker.image.avatar()} />
        }
        primary="Lynn Apple"
        wrap={false}
        secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
        contentAfter={<Badge>1</Badge>}
      />
      <ListItem
        contentBefore={<Avatar name={"Mary Joe"} src={faker.image.avatar()} />}
        primary="Mary Joe"
        wrap={false}
        secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
        contentAfter={<Badge>4</Badge>}
      />
    </List>
  </div>
</Layer>

Using sections

Sections provide sticky headers via the title prop.

<Layer
  style={{
    overflowY: "scroll",
    maxHeight: "300px",
    maxWidth: "100%",
    width: "450px"
  }}
>
  <List>
    <ListSection title="Friends">
      <ListItem
        contentBefore={
          <Avatar name={"Ben McMahen"} src={faker.image.avatar()} />
        }
        primary="Ben McMahen"
        secondary="Minim do minim cupidatat veniam aliquip sunt exercitation enim nisi nulla."
        contentAfter={<IconChevronRight />}
      />
      <ListItem
        contentBefore={
          <Avatar name={"Ben McMahen"} src={faker.image.avatar()} />
        }
        primary="Joe Chen"
        secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
        contentAfter={<IconChevronRight />}
      />
    </ListSection>
    <ListSection title="Family">
      <ListItem
        contentBefore={
          <Avatar name={"Lynn Apple"} src={faker.image.avatar()} />
        }
        primary="Lynn Apple"
        secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
        contentAfter={<IconChevronRight />}
      />
      <ListItem
        contentBefore={<Avatar name={"Mary Joe"} src={faker.image.avatar()} />}
        primary="Mary Joe"
        secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
        contentAfter={<IconChevronRight />}
      />
      <ListItem
        contentBefore={<Avatar name={"Mary Joe"} src={faker.image.avatar()} />}
        primary="Mary Joe"
        secondary="Proident irure cupidatat cupidatat elit eiusmod mollit."
        contentAfter={<IconChevronRight />}
      />
    </ListSection>
  </List>
</Layer>

Disabling wrap

You can disable text wrapping via the wrap prop.

<Layer style={{ overflow: "hidden", maxWidth: "100%", width: "450px" }}>
  <List>
    <ListItem
      wrap={false}
      contentBefore={<Avatar name={"Ben McMahen"} src={faker.image.avatar()} />}
      primary="Ben McMahen"
      secondary="Minim do minim cupidatat veniam aliquip sunt exercitation enim nisi nulla."
      contentAfter={<IconChevronRight />}
    />
  </List>
</Layer>

You can use an anchor by setting the component and href props. Alternatively, you could use something like React-router's Link component.

<List>
  <ListItem
    component="a"
    href="/"
    contentBefore={<Avatar name={"Ben McMahen"} src={faker.image.avatar()} />}
    primary="Ben McMahen"
    wrap={false}
    secondary="Minim do minim cupidatat veniam aliquip sunt exercitation enim nisi nulla."
    contentAfter={<IconChevronRight />}
  />
</List>

Non interactive

By default, list items are treated as interactive buttons. You can disable this.

<List>
  <ListItem
    interactive={false}
    contentBefore={<Avatar name={"Ben McMahen"} src={faker.image.avatar()} />}
    primary="Ben McMahen"
    wrap={false}
    contentAfter={<Button onPress={() => alert("Hey!")}>Learn more</Button>}
  />
</List>

API

List
childrenReactNode
A series of ListItem elements
cssInterpolationWithTheme<any>
ListItem
onPressOnPressFunction
componentReactType<any>
contentBeforeReactNode
An icon or avatar to appear to the left of the text content
contentAfterReactNode
an icon to appear to the right of the text content
interactiveboolean
whether the list item is interactive (ie., can be clicked as a button)
childrenReactNode
optional third row of content
wrapboolean
whether primary and secondary text should be wrapped
primary*ReactNode
The primary text content of the list item
secondaryReactNode
the secondary text content
cssInterpolationWithTheme<any>
ListSection
title*string
A title of the section
stickyboolean
whether the title should stick to the top of the scrollable content
cssInterpolationWithTheme<any>