---
title: List
description: >-
  A virtualized list component for efficiently rendering large datasets with
  customizable item rendering and built-in pull-to-refresh functionality.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/list'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/list.md'
---

# List

A virtualized list component for efficiently rendering large datasets with customizable item rendering and built-in pull-to-refresh functionality.

## Props

* **items**

  **T\[]**

  **required**

  Array of items to render

* **renderItem**

  **(item: T, index: number) => ReactNode**

  **required**

  Function to render each item

* **enablePullToRefresh**

  **boolean**

  Enable pull-to-refresh gesture (default: true)

* **fetchMore**

  **() => Promise\<void>**

  Callback to fetch more items when scrolled to bottom

* **header**

  **React.ReactNode**

  Header element rendered at the top of the list

* **height**

  **string | number**

  Height of the list container

* **loadingComponent**

  **React.ReactNode**

  Custom loading component shown while fetching more

* **onRefresh**

  **() => Promise\<void>**

  Callback for pull-to-refresh

* **refreshing**

  **boolean**

  Whether the list is currently refreshing

* **showScrollbar**

  **boolean**

  Show scrollbar (default: false)

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/shop-minis/List-Dzvqt0pR.png)

### Examples

* #### List

  ##### Default

  ```tsx
  import {List} from '@shopify/shop-minis-react'

  const sampleItems = [
    {id: '1', title: 'Item 1'},
    {id: '2', title: 'Item 2'},
    {id: '3', title: 'Item 3'},
    {id: '4', title: 'Item 4'},
    {id: '5', title: 'Item 5'},
  ]

  export default function MyComponent() {
    const renderItem = (item: (typeof sampleItems)[number]) => (
      <div className="p-4 border-b">
        <span>{item.title}</span>
      </div>
    )

    return (
      <List
        items={sampleItems}
        height={300}
        showScrollbar
        renderItem={renderItem}
      />
    )
  }
  ```

* #### Basic list

  ##### Description

  A basic virtualized list with simple items

  ##### Default

  ```tsx
  import {List} from '@shopify/shop-minis-react'

  const sampleItems = [
    {id: '1', title: 'Item 1'},
    {id: '2', title: 'Item 2'},
    {id: '3', title: 'Item 3'},
    {id: '4', title: 'Item 4'},
    {id: '5', title: 'Item 5'},
  ]

  export default function MyComponent() {
    const renderItem = (item: (typeof sampleItems)[number]) => (
      <div className="p-4 border-b">
        <span>{item.title}</span>
      </div>
    )

    return (
      <List
        items={sampleItems}
        height={300}
        showScrollbar
        renderItem={renderItem}
      />
    )
  }
  ```

* #### Product list

  ##### Description

  A virtualized list displaying product items

  ##### Default

  ```tsx
  import {List, ProductLink} from '@shopify/shop-minis-react'

  const sampleProducts = [
    {
      id: '1',
      title: 'Sample Product 1',
      price: {amount: '29.99', currencyCode: 'USD'},
      featuredImage: {url: 'https://picsum.photos/200/200', altText: 'Product 1'},
      shop: {id: 'shop1', name: 'Sample Shop'},
      defaultVariantId: 'variant-1',
      isFavorited: false,
    },
    {
      id: '2',
      title: 'Sample Product 2',
      price: {amount: '39.99', currencyCode: 'USD'},
      featuredImage: {url: 'https://picsum.photos/200/200', altText: 'Product 2'},
      shop: {id: 'shop1', name: 'Sample Shop'},
      defaultVariantId: 'variant-2',
      isFavorited: true,
    },
  ]

  export default function MyComponent() {
    const getItemSize = () => 100

    const renderItem = product => (
      <div className="p-4">
        <ProductLink product={product} />
      </div>
    )

    return (
      <List
        items={sampleProducts}
        height={400}
        itemSizeForRow={getItemSize}
        showScrollbar
        renderItem={renderItem}
      />
    )
  }
  ```

* #### Basic pull-to-refresh

  ##### Description

  A basic list with pull-to-refresh functionality. Pull down to add fresh content to the top of the list.

  ##### Default

  ```tsx
  import {useState, useCallback} from 'react'
  import {List} from '@shopify/shop-minis-react'

  const initialItems = [
    {id: '1', title: 'Item 1'},
    {id: '2', title: 'Item 2'},
    {id: '3', title: 'Item 3'},
    {id: '4', title: 'Item 4'},
    {id: '5', title: 'Item 5'},
  ]

  export default function MyComponent() {
    const [items, setItems] = useState(initialItems)
    const [refreshing, setRefreshing] = useState(false)

    const handleRefresh = useCallback(async () => {
      setRefreshing(true)

      await new Promise(resolve => setTimeout(resolve, 2000))

      const freshItems = [
        {id: Date.now().toString(), title: `Fresh Item ${Date.now()}`},
        {id: (Date.now() + 1).toString(), title: `Fresh Item ${Date.now() + 1}`},
      ]

      setItems([...freshItems, ...initialItems])
      setRefreshing(false)
    }, [])

    const getItemSize = () => 60

    const renderItem = item => (
      <div className="p-4 border-b">
        <span>{item.title}</span>
      </div>
    )

    return (
      <List
        items={items}
        height={300}
        itemSizeForRow={getItemSize}
        showScrollbar
        renderItem={renderItem}
        onRefresh={handleRefresh}
        refreshing={refreshing}
        enablePullToRefresh
      />
    )
  }
  ```