List

component

examples

• Basic list

  description

  A basic virtualized list with simple items

  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 getItemSize = () => 60
  
    const renderItem = item => (
      <div className="p-4 border-b">
        <span>{item.title}</span>
      </div>
    )
  
    return (
      <List
        items={sampleItems}
        height={300}
        itemSizeForRow={getItemSize}
        showScrollbar
        renderItem={renderItem}
      />
    )
  }
  

• Product list

  description

  A virtualized list displaying product items

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