List

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

Anchor to propsProps

Anchor to items items T[] required: Array of items to render
Anchor to renderItem renderItem (item: T, index: number) => ReactNode required: Function to render each item
Anchor to enablePullToRefresh enablePullToRefresh boolean: Enable pull-to-refresh gesture (default: true)
Anchor to fetchMore fetchMore () => Promise<void>: Callback to fetch more items when scrolled to bottom
Anchor to header header React.ReactNode: Header element rendered at the top of the list
Anchor to height height string | number: Height of the list container
Anchor to loadingComponent loadingComponent React.ReactNode: Custom loading component shown while fetching more
Anchor to onRefresh onRefresh () => Promise<void>: Callback for pull-to-refresh
Anchor to refreshing refreshing boolean: Whether the list is currently refreshing
Anchor to showScrollbar showScrollbar boolean: Show scrollbar (default: false)

Examples

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]) => (

<span>{item.title}</span>

</div>

)

return (

<List

items={sampleItems}

height={300}

showScrollbar

renderItem={renderItem}

)

}

Preview

Examples

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}
    />
  )
}

Description

A basic virtualized list with simple items

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}
    />
  )
}

Description

A virtualized list displaying product items

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}
    />
  )
}

Description

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

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
    />
  )
}

Was this page helpful?