Laravel 10 Livewire Load More On Page Scroll Example

Laravel Livewire is a powerful tool that allows you to build interactive user interfaces in Laravel using a simple and intuitive syntax. In this article, we’ll explore how to implement a “load more on page scroll” functionality using Laravel Livewire.

Prerequisites Before we start, make sure you have the following:

A basic understanding of Laravel and Livewire
Laravel 8 or higher installed on your machine
Composer installed on your machine
A web server installed on your machine (Apache, Nginx, etc.)

Step 1: Setting up the Project First, let’s create a new Laravel project using the following command:

laravel new livewire-scroll

Next, navigate to the project directory and install Livewire using the following command:

composer require livewire/livewire

Now, let’s create a new Livewire component using the following command:

php artisan make:livewire Users

This will create a new Users component in the app/Http/Livewire directory.

Step 2: Creating the Load More Functionality In the Users component, we’ll add a $perPage property to define the number of users to be displayed per page. We’ll also add a $users property to store the users retrieved from the database.

public $perPage = 10;
public $users = [];

Next, let’s create a method called loadMore that will be called when the user scrolls to the bottom of the page. This method will retrieve the next set of users from the database and append them to the existing $users property.

public function loadMore()
{
    $this->perPage += 10;
    $users = User::orderBy('created_at', 'desc')
                ->paginate($this->perPage);

    $this->users = $users->toArray()['data'];
}

In the render method of the Users component, we’ll retrieve the initial set of users from the database and render them using a Blade template.

public function render()
{
    $users = User::orderBy('created_at', 'desc')
                ->paginate($this->perPage);

    return view('livewire.users', [
        'users' => $users->toArray()['data']
    ]);
}

Finally, we’ll create a Blade template for the Users component that will display the users and listen for the scroll event to trigger the loadMore method.

<div wire:poll.750ms="loadMore" class="flex flex-wrap">
    @foreach($users as $user)
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 p-4">
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="font-bold text-2xl">{{ $user['name'] }}</h2>
                <p class="text-gray-600">{{ $user['email'] }}</p>
            </div>
        </div>
    @endforeach
</div>

<script>
    window.addEventListener('scroll', () => {
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            Livewire.emit('loadMore');
        }
    });
</script>

In the above template, we’re using the wire:poll directive to call the loadMore method every 750 milliseconds. We’re also listening for the scroll event on the window and emitting a loadMore event when the user scrolls to the bottom of the page.

Step 3: Testing the Functionality To test the “load more on page scroll” functionality, let’s create a few users in the database. In the Users component, we’ll add the User model at the top of the file.

use App\Models\User;

Next, let’s seed the database with some dummy users using the following command:

php artisan make:factory UserFactory --model=User

This will create a new UserFactory file in the database/factories directory. We’ll update the UserFactory file to create 100 users with random names and email addresses.

public function definition()
{
    return [
        'name' => $this->faker->name(),
        'email' => $this->faker->unique()->safeEmail(),
        'password' => bcrypt('password'),
    ];
}

Now, let’s run the following command to seed the database:

php artisan db:seed

In the routes/web.php file, let’s create a new route that will render the Users component.

Route::get('/', Users::class);

Finally, let’s run the following command to start the development server:

php artisan serve

Now, open your web browser and navigate to http://localhost:8000. You should see a list of 10 users displayed on the page. As you scroll to the bottom of the page, more users will be loaded until all 100 users are displayed.

Conclusion In this article, we explored how to implement a “load more on page scroll” functionality using Laravel Livewire. With Livewire, it’s easy to build interactive user interfaces that are both simple and powerful.