README

An infinite scrolling component for Laravel applications. Automatically loads more content as user scrolls. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/infinite-scroll

Livewire Usage

Basic Usage

<livewire:sb-infinite-scroll :loading="$loading" :no-more="$noMore">
    @foreach($items as $item)
        <div class="p-4 border-b">{{ $item->title }}</div>
    @endforeach
</livewire:sb-infinite-scroll>

Livewire Props

Vue 3 Usage

Setup

import { SbInfiniteScroll } from './vendor/sb-infinite-scroll';
app.component('SbInfiniteScroll', SbInfiniteScroll);

Basic Usage

<template>
  <SbInfiniteScroll
    :loading="loading"
    :no-more="noMore"
    @load-more="loadMore"
  >
    <div v-for="item in items" :key="item.id" class="p-4 border-b">
      {{ item.title }}
    </div>
  </SbInfiniteScroll>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([]);
const loading = ref(false);
const noMore = ref(false);
const page = ref(1);

const loadMore = async () => {
  loading.value = true;

  const response = await fetch(`/api/items?page=${page.value}`);
  const data = await response.json();

  items.value.push(...data.items);
  noMore.value = data.items.length === 0;
  page.value++;
  loading.value = false;
};

// Initial load
loadMore();
</script>

Feed Example

<template>
  <div class="max-w-2xl mx-auto">
    <SbInfiniteScroll
      :loading="loading"
      :no-more="noMore"
      @load-more="loadPosts"
    >
      <article
        v-for="post in posts"
        :key="post.id"
        class="p-6 bg-white rounded-lg shadow mb-4"
      >
        <h2 class="text-xl font-bold">{{ post.title }}</h2>
        <p class="text-gray-600 mt-2">{{ post.excerpt }}</p>
      </article>

      <template #loading>
        <div class="text-center py-4">
          <span class="text-gray-500">Loading more posts...</span>
        </div>
      </template>

      <template #no-more>
        <div class="text-center py-4">
          <span class="text-gray-400">You've reached the end!</span>
        </div>
      </template>
    </SbInfiniteScroll>
  </div>
</template>

Vue Props

Events

Slots

Features

• Intersection Observer: Efficient scroll detection
• Loading State: Shows spinner while loading
• End Detection: Displays message when no more items
• Customizable: Custom loading and end slots
• Preloading: Configurable load threshold

Styling

Uses Tailwind CSS:

• Spinner animation
• Centered loading/end messages
• Gray text for status

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Tailwind CSS 3.x

License

MIT License