Implementing Infinite Scroll in React and Laravel

Laravel Paginator makes it a breeze to paginate database results and render them in blade views. The HTML generated by paginator is compatible with bootstrap but you can customize it according to your needs. Paginator implements  Illuminate\Contracts\Support\Jsonable interface to expose a toJson method to convert paginated results to JSON. In this tutorial, I’ll show you how to implement infinite scrolling in React application using Laravel’s paginator.

Getting Started

After setting up a new project, run php artisan preset react && npm install && npm run watch to generate React scaffolding and install dependencies.

Now create a Photos model along with its migration to create a database table.

php artisan make:model Photos --migration 

Populate Database

Create a factory to insert fake images in photos table.

php artisan make:factory PhotosFactory --model=Photos

We’re using Faker to populate photos table with images of cats. Also, create a seeder to populate photos table with PhotosFactory.

php artisan make:seeder PhotosSeeder

Run php artisan db:seed --class=PhotosSeeder to populate photos table with 100 records.

Bootstrap React SPA

Create index view in views folder to bootstrap Javascript and CSS.

Create a Controller and add index() method to render this index view.

php artisan make:controller AppController

Also, add a route to routes/web.php file to pass down requests to index method.

Frontend

Create App component in resources/assets/js/app.js and render it to #root DOM.

Now create Photos component and add this code.

We’ll store loaded images in photos[] state. next_page state is initially set to /photos route. We’ll use it keep track of paginated URLs and make XHR calls to the backend to retrieve paginated JSON results. We’ll mark loading state as true before making XHR calls to avoid multiple requests.

Add /photos route to routes file and add getPhotos() method to your controller to return paginated results for  photos table.

In your Photos component, add getPhotos() method.

In getPhotos() method, we’re updating loading state to true to avoid multiple XHR requests in case user aggressively scrolls down. After that, we’re calling registerScrollEvent() method. Let’s define it in our component.

We’re registering a scroll event. We’ll call getPhotos() method again if a user has scrolled down to the bottom of the page. We’ll remove this event handler if there are no more posts to load after XHR call.

JSON paginated response looks like this.

We’ll update  next_page state on our component with next_page_url  response. Paginator will return a null value for next_page_url  if there’s are no more records to load.

Update Photos component render method to display images.

We’ll display  ScaleLoader component from react-spinners package on loading. We’ll pass down the loading state of our Photos component and it will appear or disappear based on its current boolean value.

I’ve created a GitHub repository for example code. If you run into any issues, please leave a comment.

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.