Add infinite scroll example using useSWRInfinite

examples/infinite-scroll/README.md

@@ -0,0 +1,36 @@
+# useSWRInfinite with scroll based on IntersectionObserver
+
+## One-Click Deploy
+
+Deploy your own SWR project with Vercel.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/vercel/swr/tree/master/examples/infinite-scroll)
+
+## How to Use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/vercel/swr/tar.gz/master | tar -xz --strip=2 swr-master/examples/infinite-scroll
+cd basic
+```
+
+Install it and run:
+
+```bash
+yarn
+yarn dev
+# or
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://vercel.com/home) ([download](https://vercel.com/download))
+
+```
+now
+```
+
+## The Idea behind the Example
+
+Show usage of useSWRInfinite with infinite scroll based on IntersectionObserver

examples/infinite-scroll/hooks/useOnScreen.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+
+const useOnScreen = (ref) => {
+  const [isIntersecting, setIntersecting] = useState(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) =>
+      setIntersecting(entry.isIntersecting)
+    )
+
+    observer.observe(ref.current)
+    // Remove the observer as soon as the component is unmounted
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  return isIntersecting
+}
+
+export default useOnScreen

examples/infinite-scroll/libs/fetch.js

@@ -0,0 +1,6 @@
+import fetch from 'isomorphic-unfetch'
+
+export default async function (...args) {
+  const res = await fetch(...args)
+  return res.json()
+}

examples/infinite-scroll/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "infinite-scroll",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "isomorphic-unfetch": "3.0.0",
+    "next": "10.0.6",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "swr": "latest"
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/infinite-scroll/pages/index.js

@@ -0,0 +1,82 @@
+import { useSWRInfinite } from 'swr'
+import { useState, useRef, useEffect } from 'react'
+
+import fetcher from '../libs/fetch'
+import useOnScreen from '../hooks/useOnScreen'
+
+const PAGE_SIZE = 6
+
+const getKey = (pageIndex, previousPageData, repo, pageSize) => {
+  if (previousPageData && !previousPageData.length) return null // reached the end
+
+  return `https://github.com/gitapi/repos/${repo}/issues?per_page=${pageSize}&page=${
+    pageIndex + 1
+  }`
+}
+
+export default function App() {
+  const ref = useRef()
+  const [repo, setRepo] = useState('facebook/react')
+  const [val, setVal] = useState(repo)
+
+  const isVisible = useOnScreen(ref)
+
+  const { data, error, mutate, size, setSize, isValidating } = useSWRInfinite(
+    (...args) => getKey(...args, repo, PAGE_SIZE),
+    fetcher
+  )
+
+  const issues = data ? [].concat(...data) : []
+  const isLoadingInitialData = !data && !error
+  const isLoadingMore =
+    isLoadingInitialData ||
+    (size > 0 && data && typeof data[size - 1] === 'undefined')
+  const isEmpty = data?.[0]?.length === 0
+  const isReachingEnd = size === PAGE_SIZE
+  const isRefreshing = isValidating && data && data.length === size
+
+  useEffect(() => {
+    if (isVisible && !isReachingEnd && !isRefreshing) {
+      setSize(size + 1)
+    }
+  }, [isVisible, isRefreshing])
+
+  return (
+    <div style={{ fontFamily: 'sans-serif' }}>
+      <input
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+        placeholder="facebook/reect"
+      />
+      <button
+        onClick={() => {
+          setRepo(val)
+          setSize(1)
+        }}
+      >
+        load issues
+      </button>
+      <p>
+        showing {size} page(s) of {isLoadingMore ? '...' : issues.length}{' '}
+        issue(s){' '}
+        <button disabled={isRefreshing} onClick={() => mutate()}>
+          {isRefreshing ? 'refreshing...' : 'refresh'}
+        </button>
+        <button disabled={!size} onClick={() => setSize(0)}>
+          clear
+        </button>
+      </p>
+      {isEmpty ? <p>Yay, no issues found.</p> : null}
+      {issues.map((issue) => {
+        return (
+          <p key={issue.id} style={{ margin: '6px 0', height: 50 }}>
+            - {issue.title}
+          </p>
+        )
+      })}
+      <div ref={ref}>
+        {isLoadingMore ? 'loading...' : isReachingEnd ? 'no more issues' : ''}
+      </div>
+    </div>
+  )
+}