Skip to content

Commit 4f3a201

Browse files
onderonuronderonur
committed
improved demo & docs
1 parent 29dae02 commit 4f3a201

File tree

14 files changed

+304
-276
lines changed

14 files changed

+304
-276
lines changed

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use client';
2+
3+
import useInfiniteScroll from 'react-infinite-scroll-hook';
4+
import { List, ListItem, Loading } from '../../components/list';
5+
import { PageTitle } from '../../components/page-title';
6+
import { useLoadItems } from '../../lib/utils';
7+
8+
export default function HorizontalElementScrollPage() {
9+
const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
10+
11+
const [infiniteRef, { rootRef }] = useInfiniteScroll({
12+
loading,
13+
hasNextPage,
14+
onLoadMore: loadMore,
15+
disabled: Boolean(error),
16+
rootMargin: '0px 400px 0px 0px',
17+
});
18+
19+
return (
20+
<main>
21+
<PageTitle filePath="apps/demo/src/app/horizontal-element-scroll/page.tsx">
22+
Horizontal Element Scroll
23+
</PageTitle>
24+
<div
25+
ref={rootRef}
26+
className="flex max-w-[600px] overflow-auto bg-slate-100"
27+
>
28+
<List direction="horizontal">
29+
{items.map((item) => (
30+
<ListItem key={item.key}>{item.value}</ListItem>
31+
))}
32+
</List>
33+
{hasNextPage && <Loading ref={infiniteRef} />}
34+
</div>
35+
</main>
36+
);
37+
}

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

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

56
const inter = Inter({ subsets: ['latin'] });
@@ -9,14 +10,19 @@ export const metadata: Metadata = {
910
description: 'Demo app to showcase react-infinite-scroll-hook usage',
1011
};
1112

12-
export default function RootLayout({
13-
children,
14-
}: Readonly<{
13+
type RootLayoutProps = {
1514
children: React.ReactNode;
16-
}>) {
15+
};
16+
17+
export default function RootLayout({ children }: RootLayoutProps) {
1718
return (
1819
<html lang="en">
19-
<body className={`${inter.className} antialiased`}>{children}</body>
20+
<body
21+
className={`${inter.className} flex flex-col gap-4 p-4 antialiased`}
22+
>
23+
<Header />
24+
<div>{children}</div>
25+
</body>
2026
</html>
2127
);
2228
}

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

Lines changed: 20 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,27 @@
1-
'use client';
2-
3-
import { useState } from 'react';
4-
import { InfiniteListSimple } from '../components/infinite-list-simple';
5-
import { InfiniteListWithHorizontalScroll } from '../components/infinite-list-with-horizontal-scroll';
6-
import { InfiniteListWithReverseHozirontalScroll } from '../components/infinite-list-with-reverse-horizontal-scroll';
7-
import { InfiniteListWithReverseVerticalScroll } from '../components/infinite-list-with-reverse-vertical-scroll';
8-
import { InfiniteListWithVerticalScroll } from '../components/infinite-list-with-vertical-scroll';
9-
10-
enum InfiniteListType {
11-
SIMPLE,
12-
VERTICAL_SCROLL,
13-
HORIZONTAL_SCROLL,
14-
REVERSE_VERTICAL_SCROLL,
15-
REVERSE_HORIZONTAL_SCROLL,
16-
}
17-
18-
export default function Page() {
19-
const [listType, setListType] = useState<InfiniteListType>(
20-
InfiniteListType.SIMPLE,
21-
);
22-
23-
let InfiniteList;
24-
25-
switch (listType) {
26-
case InfiniteListType.VERTICAL_SCROLL: {
27-
InfiniteList = InfiniteListWithVerticalScroll;
28-
break;
29-
}
30-
case InfiniteListType.HORIZONTAL_SCROLL: {
31-
InfiniteList = InfiniteListWithHorizontalScroll;
32-
break;
33-
}
34-
case InfiniteListType.REVERSE_VERTICAL_SCROLL: {
35-
InfiniteList = InfiniteListWithReverseVerticalScroll;
36-
break;
37-
}
38-
case InfiniteListType.REVERSE_HORIZONTAL_SCROLL: {
39-
InfiniteList = InfiniteListWithReverseHozirontalScroll;
40-
break;
41-
}
42-
default: {
43-
InfiniteList = InfiniteListSimple;
44-
}
45-
}
1+
import Link from 'next/link';
2+
import { PageTitle } from '../components/page-title';
463

4+
export default function HomePage() {
475
return (
48-
<main className="flex flex-col gap-2 p-4">
49-
<h1 className="text-2xl font-black">Infinite List</h1>
50-
<p className="text-xl font-bold">
51-
Created by using “react-infinite-scroll-hook”
6+
<main>
7+
<PageTitle>Home</PageTitle>
8+
<p>
9+
Select one of the options to see the live demo and their source code.
5210
</p>
53-
<label htmlFor="listType" className="font-semibold">
54-
List Type
55-
<select
56-
id="listType"
57-
className="ml-2 rounded border p-1"
58-
value={listType}
59-
onChange={(e) => {
60-
setListType(Number.parseInt(e.target.value));
61-
}}
11+
<p>
12+
This is a very simple demo website for `react-infinite-scroll-hook` only
13+
to have some live demos for users.
14+
</p>
15+
<p>
16+
You can check the full source code and docs{' '}
17+
<Link
18+
href="https://github.com/onderonur/react-infinite-scroll-hook"
19+
className="font-semibold text-slate-600"
6220
>
63-
<option value={InfiniteListType.SIMPLE}>Simple List</option>
64-
<option value={InfiniteListType.VERTICAL_SCROLL}>
65-
Vertically Scrollable List
66-
</option>
67-
<option value={InfiniteListType.HORIZONTAL_SCROLL}>
68-
Horizontally Scrollable List
69-
</option>
70-
<option value={InfiniteListType.REVERSE_VERTICAL_SCROLL}>
71-
Reversed Vertically Scrollable List
72-
</option>
73-
<option value={InfiniteListType.REVERSE_HORIZONTAL_SCROLL}>
74-
Reversed Horizontally Scrollable List
75-
</option>
76-
</select>
77-
</label>
78-
<InfiniteList />
21+
here
22+
</Link>
23+
.
24+
</p>
7925
</main>
8026
);
8127
}

apps/demo/src/components/infinite-list-with-reverse-horizontal-scroll.tsx renamed to apps/demo/src/app/reverse-horizontal-element-scroll/page.tsx

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
'use client';
2+
13
import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
24
import useInfiniteScroll from 'react-infinite-scroll-hook';
3-
import { useLoadItems } from '../lib/utils';
4-
import { List, ListItem, Loading } from './list';
5+
import { List, ListItem, Loading } from '../../components/list';
6+
import { PageTitle } from '../../components/page-title';
7+
import { useLoadItems } from '../../lib/utils';
58

6-
export function InfiniteListWithReverseHozirontalScroll() {
9+
export default function ReverseHorizontalElementScrollPage() {
710
const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
811

912
const [infiniteRef, { rootRef }] = useInfiniteScroll({
@@ -46,21 +49,22 @@ export function InfiniteListWithReverseHozirontalScroll() {
4649
}, []);
4750

4851
return (
49-
<div
50-
ref={rootRefSetter}
51-
className="max-w-[600px] overflow-auto bg-slate-100"
52-
onScroll={handleRootScroll}
53-
>
54-
<List direction="horizontal">
55-
{hasNextPage && (
56-
<ListItem ref={infiniteRef}>
57-
<Loading />
58-
</ListItem>
59-
)}
60-
{reversedItems.map((item) => (
61-
<ListItem key={item.key}>{item.value}</ListItem>
62-
))}
63-
</List>
64-
</div>
52+
<main>
53+
<PageTitle filePath="apps/demo/src/app/reverse-horizontal-element-scroll/page.tsx">
54+
Reverse Horizontal Element Scroll
55+
</PageTitle>
56+
<div
57+
ref={rootRefSetter}
58+
className="flex max-w-[600px] overflow-auto bg-slate-100"
59+
onScroll={handleRootScroll}
60+
>
61+
{hasNextPage && <Loading ref={infiniteRef} />}
62+
<List direction="horizontal">
63+
{reversedItems.map((item) => (
64+
<ListItem key={item.key}>{item.value}</ListItem>
65+
))}
66+
</List>
67+
</div>
68+
</main>
6569
);
6670
}

apps/demo/src/components/infinite-list-with-reverse-vertical-scroll.tsx renamed to apps/demo/src/app/reverse-vertical-element-scroll/page.tsx

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
'use client';
2+
13
import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
24
import useInfiniteScroll from 'react-infinite-scroll-hook';
3-
import { useLoadItems } from '../lib/utils';
4-
import { List, ListItem, Loading } from './list';
5+
import { List, ListItem, Loading } from '../../components/list';
6+
import { PageTitle } from '../../components/page-title';
7+
import { useLoadItems } from '../../lib/utils';
58

6-
export function InfiniteListWithReverseVerticalScroll() {
9+
export default function ReverseVerticalElementScrollPage() {
710
const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
811

912
const [infiniteRef, { rootRef }] = useInfiniteScroll({
@@ -47,21 +50,22 @@ export function InfiniteListWithReverseVerticalScroll() {
4750
}, []);
4851

4952
return (
50-
<div
51-
ref={rootRefSetter}
52-
className="max-h-[500px] max-w-[500px] overflow-auto bg-slate-100"
53-
onScroll={handleRootScroll}
54-
>
55-
<List>
56-
{hasNextPage && (
57-
<ListItem ref={infiniteRef}>
58-
<Loading />
59-
</ListItem>
60-
)}
61-
{reversedItems.map((item) => (
62-
<ListItem key={item.key}>{item.value}</ListItem>
63-
))}
64-
</List>
65-
</div>
53+
<main>
54+
<PageTitle filePath="apps/demo/src/app/reverse-vertical-element-scroll/page.tsx">
55+
Reverse Vertical Element Scroll
56+
</PageTitle>
57+
<div
58+
ref={rootRefSetter}
59+
className="max-h-[500px] max-w-[500px] overflow-auto bg-slate-100"
60+
onScroll={handleRootScroll}
61+
>
62+
{hasNextPage && <Loading ref={infiniteRef} />}
63+
<List>
64+
{reversedItems.map((item) => (
65+
<ListItem key={item.key}>{item.value}</ListItem>
66+
))}
67+
</List>
68+
</div>
69+
</main>
6670
);
6771
}

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use client';
2+
3+
import useInfiniteScroll from 'react-infinite-scroll-hook';
4+
import { List, ListItem, Loading } from '../../components/list';
5+
import { PageTitle } from '../../components/page-title';
6+
import { useLoadItems } from '../../lib/utils';
7+
8+
export default function VerticalElementScrollPage() {
9+
const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
10+
11+
const [infiniteRef, { rootRef }] = useInfiniteScroll({
12+
loading,
13+
hasNextPage,
14+
onLoadMore: loadMore,
15+
disabled: Boolean(error),
16+
rootMargin: '0px 0px 400px 0px',
17+
});
18+
19+
return (
20+
<main>
21+
<PageTitle filePath="apps/demo/src/app/vertical-element-scroll/page.tsx">
22+
Vertical Element Scroll
23+
</PageTitle>
24+
<div
25+
ref={rootRef}
26+
className="max-h-[500px] max-w-[500px] overflow-auto bg-slate-100"
27+
>
28+
<List>
29+
{items.map((item) => (
30+
<ListItem key={item.key}>{item.value}</ListItem>
31+
))}
32+
</List>
33+
{hasNextPage && <Loading ref={infiniteRef} />}
34+
</div>
35+
</main>
36+
);
37+
}

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
'use client';
2+
3+
import useInfiniteScroll from 'react-infinite-scroll-hook';
4+
import { List, ListItem, Loading } from '../../components/list';
5+
import { PageTitle } from '../../components/page-title';
6+
import { useLoadItems } from '../../lib/utils';
7+
8+
export default function WindowScrollPage() {
9+
const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
10+
11+
const [infiniteRef] = useInfiniteScroll({
12+
loading,
13+
hasNextPage,
14+
onLoadMore: loadMore,
15+
// When there is an error, we stop infinite loading.
16+
// It can be reactivated by setting "error" state as undefined.
17+
disabled: Boolean(error),
18+
// `rootMargin` is passed to `IntersectionObserver`.
19+
// We can use it to trigger 'onLoadMore' when the sentry comes near to become
20+
// visible, instead of becoming fully visible on the screen.
21+
rootMargin: '0px 0px 400px 0px',
22+
});
23+
24+
return (
25+
<>
26+
<main>
27+
<PageTitle filePath="apps/demo/src/app/window-scroll/page.tsx">
28+
Window Scroll
29+
</PageTitle>
30+
<List>
31+
{items.map((item) => (
32+
<ListItem key={item.key}>{item.value}</ListItem>
33+
))}
34+
</List>
35+
{hasNextPage && <Loading ref={infiniteRef} />}
36+
</main>
37+
{/* This is just for demonstration purposes.
38+
It may not be a good idea to put content below a full page infinite scroll list. */}
39+
<footer className="h-[600px] bg-slate-300 p-4">Footer</footer>
40+
</>
41+
);
42+
}

0 commit comments

Comments
 (0)