Skip to content

Commit 4ddf7eb

Browse files
onderonuronderonur
committed
added reverse window scroll demo
1 parent 9555458 commit 4ddf7eb

File tree

10 files changed

+91
-10
lines changed

10 files changed

+91
-10
lines changed

‎apps/demo/src/app/horizontal-element-scroll/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default function HorizontalElementScrollPage() {
1313
hasNextPage,
1414
onLoadMore: loadMore,
1515
disabled: Boolean(error),
16-
rootMargin: '0px 400px 0px 0px',
1716
});
1817

1918
return (

‎apps/demo/src/app/layout.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from 'next';
22
import { Inter } from 'next/font/google';
33
import { Header } from '../components/header';
4+
import { Layout } from '../components/layout';
45
import '../styles/globals.css';
56

67
const inter = Inter({ subsets: ['latin'] });
@@ -17,11 +18,11 @@ type RootLayoutProps = {
1718
export default function RootLayout({ children }: RootLayoutProps) {
1819
return (
1920
<html lang="en">
20-
<body
21-
className={`${inter.className} flex flex-col gap-4 p-4 antialiased`}
22-
>
23-
<Header />
24-
<div>{children}</div>
21+
<body className={`${inter.className} antialiased`}>
22+
<Layout>
23+
<Header />
24+
<div>{children}</div>
25+
</Layout>
2526
</body>
2627
</html>
2728
);

‎apps/demo/src/app/reverse-horizontal-element-scroll/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export default function ReverseHorizontalElementScrollPage() {
1414
hasNextPage,
1515
onLoadMore: loadMore,
1616
disabled: Boolean(error),
17-
rootMargin: '0px 0px 0px 400px',
1817
});
1918

2019
const scrollableRootRef = useRef<React.ComponentRef<'div'> | null>(null);

‎apps/demo/src/app/reverse-vertical-element-scroll/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export default function ReverseVerticalElementScrollPage() {
1414
hasNextPage,
1515
onLoadMore: loadMore,
1616
disabled: Boolean(error),
17-
rootMargin: '400px 0px 0px 0px',
1817
});
1918

2019
const scrollableRootRef = useRef<React.ComponentRef<'div'> | null>(null);

‎apps/demo/src/app/reverse-window-scroll/page.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
'use client';
2+
3+
import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
4+
import useInfiniteScroll from 'react-infinite-scroll-hook';
5+
import { List, ListItem, Loading } from '../../components/list';
6+
import { PageTitle } from '../../components/page-title';
7+
import { useLoadItems } from '../../lib/utils';
8+
9+
export default function ReverseWindowScrollPage() {
10+
const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
11+
12+
const [infiniteRef] = useInfiniteScroll({
13+
loading,
14+
hasNextPage,
15+
onLoadMore: loadMore,
16+
disabled: Boolean(error),
17+
});
18+
19+
const lastScrollDistanceToBottomRef = useRef<number>();
20+
21+
const reversedItems = useMemo(() => [...items].reverse(), [items]);
22+
23+
// We keep the scroll position when new items are added etc.
24+
useLayoutEffect(() => {
25+
const lastScrollDistanceToBottom =
26+
lastScrollDistanceToBottomRef.current ?? 0;
27+
28+
document.documentElement.scrollTop =
29+
document.body.scrollHeight - lastScrollDistanceToBottom;
30+
}, [reversedItems]);
31+
32+
useEffect(() => {
33+
function handleScroll() {
34+
const rootNode = document.documentElement;
35+
const scrollDistanceToBottom = rootNode.scrollHeight - rootNode.scrollTop;
36+
lastScrollDistanceToBottomRef.current = scrollDistanceToBottom;
37+
}
38+
39+
window.addEventListener('scroll', handleScroll);
40+
41+
return () => {
42+
window.removeEventListener('scroll', handleScroll);
43+
};
44+
}, []);
45+
46+
return (
47+
<main>
48+
{hasNextPage && <Loading ref={infiniteRef} />}
49+
<List>
50+
{reversedItems.map((item) => (
51+
<ListItem key={item.key}>{item.value}</ListItem>
52+
))}
53+
</List>
54+
<PageTitle filePath="apps/demo/src/app/reverse-window-scroll/page.tsx">
55+
Reverse Window Scroll
56+
</PageTitle>
57+
</main>
58+
);
59+
}

‎apps/demo/src/app/vertical-element-scroll/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default function VerticalElementScrollPage() {
1313
hasNextPage,
1414
onLoadMore: loadMore,
1515
disabled: Boolean(error),
16-
rootMargin: '0px 0px 400px 0px',
1716
});
1817

1918
return (

‎apps/demo/src/components/header.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export function Header() {
3737
<option value="/horizontal-element-scroll">
3838
Horizontal Element Scroll
3939
</option>
40+
<option value="/reverse-window-scroll">Reverse Window Scroll</option>
4041
<option value="/reverse-vertical-element-scroll">
4142
Reverse Vertical Element Scroll
4243
</option>

‎apps/demo/src/components/layout.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use client';
2+
3+
import { usePathname } from 'next/navigation';
4+
5+
type LayoutProps = {
6+
children: React.ReactNode;
7+
};
8+
9+
export function Layout({ children }: LayoutProps) {
10+
const pathname = usePathname();
11+
12+
return (
13+
<div
14+
className={`flex gap-4 p-4 ${pathname === '/reverse-window-scroll' ? 'flex-col-reverse' : 'flex-col'}`}
15+
>
16+
{children}
17+
</div>
18+
);
19+
}

‎apps/demo/src/components/page-title.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type PageTitleProps = {
77

88
export function PageTitle({ filePath, children }: PageTitleProps) {
99
return (
10-
<div className="pb-2">
10+
<div>
1111
<h1 className="text-xl font-semibold">{children}</h1>
1212
{filePath && (
1313
<Link

‎packages/react-infinite-scroll-hook/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,12 @@ function VerticalElementScrollPage() {
8282
loading,
8383
hasNextPage,
8484
onLoadMore: loadMore,
85+
// When there is an error, we stop infinite loading.
86+
// It can be reactivated by setting "error" state as undefined.
8587
disabled: Boolean(error),
88+
// `rootMargin` is passed to `IntersectionObserver`.
89+
// We can use it to trigger 'onLoadMore' when the sentry comes near to become
90+
// visible, instead of becoming fully visible on the screen.
8691
rootMargin: '0px 0px 400px 0px',
8792
});
8893

0 commit comments

Comments
 (0)