Infinite Scroll in Inertia v2.2

The Laravel team released Inertia v2.2 with a new <InfiniteScroll/> component. This component will likely be a huge timesaver if you've ever built an infinite scroll feature by hand. This update introduces an Inertia::scroll() method that works seamlessly with Laravel's full, simple, and cursor pagination.

Route::get('/users', function () {
    return Inertia::render('Users/Index', [
        'users' => Inertia::scroll(fn () => User::paginate())
    ]);
});

On the client side, you just wrap your content in the infinite scroll component:

import { InfiniteScroll } from '@inertiajs/react'
 
export default function Users({ users }) {
  return (
    <InfiniteScroll data="users">
      {users.data.map(user => (
        <div key={user.id}>
          {user.name}
        </div>
      ))}
    </InfiniteScroll>
  )
}

Main Features

Easy pagination using Laravel's convention with the Vue/React/Svelte component
URL updates as you scroll to easily share links
Scrolling back up updates the URL
Backfills earlier pages on a page refresh
Bi-directional scrolling out of the box
Reverse mode: scroll up to load the next page, and scrolling down loads previous pages
Configurable and flexible options
Manual mode for complete control of loading
And more

Learn More

You can get started with this component in a new Laravel starter kit project or updating your existing project to Inertia v2.2. Here's the Infinite Scroll documentation to start integrating it in your application.