next-learn-starter | Learn Next.js Starter Code | Learning library
kandi X-RAY | next-learn-starter Summary
kandi X-RAY | next-learn-starter Summary
Learn Next.js Starter Code
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of next-learn-starter
next-learn-starter Key Features
next-learn-starter Examples and Code Snippets
Community Discussions
Trending Discussions on next-learn-starter
QUESTION
I created a markdown blog by following the Next Js documentation and Using Typescript. To Fetch a list of blog posts I used getStaticProps
as the docs suggested. I tried with some npm packages, it's not working, or maybe I didn't know how to set up perfectly.
If there is a good plugin or custom hooks, Please tell me how can I add the infinite scroll feature in Next Js static site generation.
Project source code is available in this GitHub repository: https://github.com/vercel/next-learn-starter/blob/master/typescript-final/pages/index.tsx
...ANSWER
Answered 2020-Jul-21 at 17:52I did some research and created my own react hooks to implement infinite scroll in Next JS. So, I am answering my question.
If anyone has a better method, please don't forget to share it here.
I found two working methods. First One done by using innerHeight
, scrollTop
, offsetHeight
values. It worked perfectly, but somehow I felt this is not the correct way to do that. Please correct me if I am wrong.
The second method was to asynchronously observe changes in the intersection of a target element by Intersection Observer API. First, I created a pagination custom react hook to limit my blog posts then I used IntersectionObserver to fetch the blog posts of the next pages.
usePagination.tsx:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install next-learn-starter
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page