Press to Load More

The components.Footer property can be used to place a “load more” button that appends more items to the list.

Scroll to the bottom of the list and press the button to load 100 more items. The setTimeout simulates a network request; in the real world, you can fetch data from a service.

App.tsxFooter.tsxutils.ts

import { Virtuoso } from 'react-virtuoso'
import { useState, useCallback, useEffect } from 'react'
import { Footer } from './Footer'
import { generateUsers } from './utils'

export default function App() {
  const [users, setUsers] = useState(() => [])
  const [loading, setLoading] = useState(false)

  const loadMore = useCallback(() => {
    setLoading(true)
    return setTimeout(() => {
      setUsers((users) => [...users, ...generateUsers(100, users.length)])
      setLoading(() => false)
    }, 500)
  }, [setUsers, setLoading])

  useEffect(() => {
    const timeout = loadMore()
    return () => clearTimeout(timeout)
  }, [])

  return (
    <Virtuoso
      style={{ height: '100%' }}
      data={users}
      context={{ loading, loadMore }}
      increaseViewportBy={200}
      itemContent={(index, user) => {
        return <div className="border-b border-gray-200 px-4 py-2 text-sm">{user.name}</div>
      }}
      components={{ Footer }}
    />
  )
}