Pagination and infinite scrolling with Rails and the Hotwire stack

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • PopRuby - Clothing and Accessories for Ruby Developers
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • turbo-pagination

    You can find the complete code for this tutorial on Github, and you can try out a “production” version of the application on Heroku.

  • tailwindcss-rails

    Because we are using Tailwind via the tailwindcss-rails gem, the scaffold generator applies some basic Tailwind styling to generated views, so we have nice looking Widget pages right out of the box.

  • PopRuby

    PopRuby: Clothing and Accessories for Ruby Developers. Fashion meets Ruby! Shop our fun Ruby-inspired apparel and accessories designed to celebrate the joy and diversity of the Ruby community.

  • Pagy

    🏆 The Best Pagination Ruby Gem 🥇

    In our application, we will use Pagy to implement pagination. Let’s install Pagy now, following along with the Pagy quick start guide.

  • request.js

    One way to work around this is described in Dale’s article. In it, a Stimulus controller and request.js are used to insert a Turbo Stream header into GET requests, getting Turbo to see the request as a Turbo Stream request despite not originating from a form submission.

  • stimulus-use

    A collection of composable behaviors for your Stimulus Controllers

    To make using the IntersectionObserver API easier, we will add the wonderful stimulus-use package to our application. This is not a requirement, but it does simplify the code a bit.

  • hotwire-example-template

    A collection of branches that transmit HTML over the wire.

    The autoclick controller we are using here was lightly adapted from Sean Doyle’s autoclick controller in his own implementation of infinite scrolling with Turbo.

  • turbo

    The speed of a single-page web application without having to write any JavaScript (by hotwired)

    Sean’s implementation of infinite scrolling presents yet another approach to working around the limits of Turbo Frames and is worth reviewing in full, if you are interested in more advanced Turbo use cases. In Sean’s work, the key thing to note is his use of the code from this Turbo draft PR which adds additional “actions” to Turbo Frames.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts