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.