Endless Scroll / Infinite Loading with Turbo Streams & Stimulus

• turbo

  145 6,424 8.7 JavaScript

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

  

Hotwire Turbo by the Ruby on Rails developers is the new solution to enhance server side rendered apps with interactive behavior without much Javascript at all.

• IntersectionObserver

  6 3,621 5.0 Bikeshed

  Intersection Observer

  

// app/javascript/controllers/infinite_scoll_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = ["scrollArea", "pagination"] connect() { this.createObserver() } createObserver() { const observer = new IntersectionObserver( entries => this.handleIntersect(entries), { // https://github.com/w3c/IntersectionObserver/issues/124#issuecomment-476026505 threshold: [0, 1.0], } ) observer.observe(this.scrollAreaTarget) } handleIntersect(entries) { entries.forEach(entry => { if (entry.isIntersecting) { this.loadMore() } }) } loadMore() { const next = this.paginationTarget.querySelector("[rel=next]") if (!next) { return } const href = next.href fetch(href, { headers: { Accept: "text/vnd.turbo-stream.html", }, }) .then(r => r.text()) .then(html => Turbo.renderStreamMessage(html)) .then(_ => history.replaceState(history.state, "", href)) } }

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• turbo-rails

  48 1,983 8.3 JavaScript

  Use Turbo in your Ruby on Rails app

  

Important to switch the format to html to get our ‘post’ partial, don’t know if intended or bug.

Suggest a related project