Stimulus Infinite Scroll controller

Installation

1. Add package yarn add stimulus-infinite-scroll
2. Import package in your application

import { Application } from 'stimulus'
const application = Application.start()

import InfiniteScrollController from 'stimulus-infinite-scroll'
application.register('toggle', InfiniteScrollController)

Example

<div data-controller='infinite-scroll'
  data-infinite-scroll-root-margin="200px"> <-- optional -->
  <div data-target='infinite-scroll.entries'>
    <%= render 'posts' %>
  </div>

  <div data-target='infinite-scroll.pagination' class='d-none'>
    <%== pagy_nav @pagy %>
  </div>
</div>

.invisible { visibility: hidden; }

# controller
def index
  @pagy, @rewards = pagy ...

  respond_to do |format|
    format.json {
       render json: {
         entries: render_to_string(partial: 'rewards/rewards', formats: [:html]),
         pagination: view_context.pagy_nav(@pagy)
       }
    }
  end
end

# view
<%= render partial: 'rewards/reward', collection: @rewards, cached: true %>

Publish new version

1. Run yarn build
2. Update CHANGELOG.md
3. Run yarn publish

Credit

Chris Oliver @ https://github.com/gorails-screencasts/infinite-scroll-stimulus-js