docs: add InfiniteScroll example

igordanchenko · Jul 1, 2024 · 51e6e28 · 51e6e28
1 parent 5a279be
commit 51e6e28
Show file tree

Hide file tree

Showing 22 changed files with 2,184 additions and 5 deletions.
diff --git a/docs/documentation.md b/docs/documentation.md
@@ -685,6 +685,119 @@ the content container padding and the left-hand side navigation menu:
 />
 ```
 
+## Infinite Scroll
+
+You can use the experimental `InfiniteScroll` component to implement an infinite
+scroll feature in your app. The component is currently exported as
+`UnstableInfiniteScroll`. Please share your feedback if you have successfully
+used this component in your project or encountered any issues.
+
+```tsx
+import { UnstableInfiniteScroll as InfiniteScroll } from "react-photo-album/scroll";
+```
+
+<table class="docs">
+  <tbody>
+    <tr>
+      <td><span class="required">children</span></td>
+      <td>ReactElement</td>
+      <td>Photo album component. Must be the only child.</td>
+    </tr>
+    <tr>
+      <td><span class="required">fetch</span></td>
+      <td>(index: number) =&gt; Promise&lt;Photo[] | null&gt;</td>
+      <td>Photo fetcher. Resolve promise with `null` to indicate end of stream.</td>
+    </tr>
+    <tr>
+      <td>photos</td>
+      <td>Photo[]</td>
+      <td>Initial photos (optional).</td>
+    </tr>
+    <tr>
+      <td>retries</td>
+      <td>number</td>
+      <td>
+        <p>Retry attempts.</p>
+        <p>Default value: <span class="font-mono">0</span></p>
+      </td>
+    </tr>
+    <tr>
+      <td>singleton</td>
+      <td>boolean</td>
+      <td>Use a single photo album component (masonry layout).</td>
+    </tr>
+    <tr>
+      <td>rootMargin</td>
+      <td>string</td>
+      <td>
+        <p>IntersectionObserver root margin setting.</p>
+        <p>Default value: <span class="font-mono">800px</span></p>
+      </td>
+    </tr>
+    <tr>
+      <td>error</td>
+      <td>ReactNode</td>
+      <td>Markup to display when an error occurred.</td>
+    </tr>
+    <tr>
+      <td>loading</td>
+      <td>ReactNode</td>
+      <td>Markup to display while fetching additional photos.</td>
+    </tr>
+    <tr>
+      <td>finished</td>
+      <td>ReactNode</td>
+      <td>Markup to display when no more photos are available.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Rows Layout With Infinite Scroll
+
+```tsx
+import { RowsPhotoAlbum } from "react-photo-album";
+import { UnstableInfiniteScroll as InfiniteScroll } from "react-photo-album/scroll";
+
+// ...
+
+export default function Gallery() {
+  return (
+    <InfiniteScroll photos={initialPhotos} fetch={fetchPhotos}>
+      <RowsPhotoAlbum
+        photos={[]}
+        spacing={20}
+        componentsProps={{ container: { style: { marginBottom: 20 } } }}
+      />
+    </InfiniteScroll>
+  );
+}
+```
+
+### Masonry Layout With Infinite Scroll
+
+```tsx
+import { MasonryPhotoAlbum } from "react-photo-album";
+import { UnstableInfiniteScroll as InfiniteScroll } from "react-photo-album/scroll";
+
+// ...
+
+export default function Gallery() {
+  return (
+    <InfiniteScroll singleton photos={initialPhotos} fetch={fetchPhotos}>
+      <MasonryPhotoAlbum
+        photos={[]}
+        spacing={20}
+        componentsProps={{ container: { style: { marginBottom: 20 } } }}
+      />
+    </InfiniteScroll>
+  );
+}
+```
+
+### Columns Layout With Infinite Scroll
+
+Columns layout is not a good fit for the infinite scroll feature.
+
 ## Server-Side Rendering (SSR)
 
 By default, [React Photo Album](/) produces an empty markup in SSR because the

diff --git a/docs/examples/infinite-scroll.md b/docs/examples/infinite-scroll.md
@@ -0,0 +1,17 @@
+# Infinite Scroll
+
+This example demonstrates the use of the experimental
+[InfiniteScroll](/documentation#InfiniteScroll) component. This demo reuses the
+same set of photos due to bandwidth limitations and finishes after 200 photos.
+
+## Live Demo
+
+<InfiniteScrollExample layout="masonry" />
+
+## Sandbox
+
+<StackBlitzLink href="github/igordanchenko/react-photo-album/tree/next/examples/infinite-scroll" file="src/App.tsx" title="react-photo-album-infinite-scroll" description="react-photo-album infinite scroll" />
+
+## Source Code
+
+<GitHubLink suffix="infinite-scroll" />
diff --git a/examples/infinite-scroll/.gitignore b/examples/infinite-scroll/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/infinite-scroll/index.html b/examples/infinite-scroll/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#ffffff" />
+    <title>React Photo Album | Infinite Scroll</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>