Skip to content

Commit 21140d3

Browse files
karl-runkarl-run
committed
chore: tailwind example.. because reasons
1 parent 4b3ccde commit 21140d3

File tree

9 files changed

+636
-174
lines changed

9 files changed

+636
-174
lines changed

‎example/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<title>react-bottom-scroll-listener</title>
1010
</head>
1111

12-
<body>
12+
<body class="bg-">
1313
<noscript>
1414
You need to enable JavaScript to run this app.
1515
</noscript>

‎example/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
"not op_mini all"
2020
],
2121
"devDependencies": {
22-
"@types/prop-types": "^15.7.13"
22+
"@types/prop-types": "^15.7.13",
23+
"autoprefixer": "^10.4.20",
24+
"postcss": "^8.4.47",
25+
"tailwindcss": "^3.4.13",
26+
"vite": "^5.4.8"
2327
}
2428
}

‎example/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎example/src/App.jsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import React, { useState } from 'react';
2-
import Toggle from 'react-toggle';
1+
import React, { useState } from 'react'
2+
import Toggle from 'react-toggle'
33

4-
import ComponentExample from './ComponentExample';
5-
import HookExample from './HookExample';
4+
import ComponentExample from './ComponentExample'
5+
import HookExample from './HookExample'
66

77
const App = () => {
8-
const [hookExample, setHookExample] = useState(true);
9-
const [alertOnBottom, setAlertOnBottom] = useState(true);
8+
const [hookExample, setHookExample] = useState(true)
9+
const [alertOnBottom, setAlertOnBottom] = useState(true)
1010

1111
return (
1212
<div>
13-
<header>
14-
<h1>react-bottom-scroll-listener</h1>
15-
<div className="right-toggle-box">
16-
<label htmlFor="alert-state">
13+
<header className="bg-purple-700 p-2 flex gap-3 flex-col md:flex-row justify-between m-2 rounded text-white items-center border-2 border-purple-950">
14+
<h1 className="text-xl">react-bottom-scroll-listener</h1>
15+
<div className="flex gap-6">
16+
<label htmlFor="alert-state" className="flex justify-center gap-3">
1717
<span>Use {alertOnBottom ? 'alert dialog' : 'console.log'}</span>
1818
<Toggle id="alert-state" checked={alertOnBottom} onChange={() => setAlertOnBottom((b) => !b)} />
1919
</label>
20-
<label htmlFor="use-hook-state">
20+
<label htmlFor="use-hook-state" className="flex justify-center gap-3">
2121
<span>Use {hookExample ? 'hook' : 'component'}</span>
2222
<Toggle id="use-hook-state" checked={hookExample} onChange={() => setHookExample((b) => !b)} />
2323
</label>
2424
</div>
2525
</header>
2626
{hookExample ? <HookExample alertOnBottom={alertOnBottom} /> : <ComponentExample alertOnBottom={alertOnBottom} />}
2727
</div>
28-
);
29-
};
28+
)
29+
}
3030

31-
export default App;
31+
export default App

‎example/src/HookExample.jsx

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,52 @@
1-
import React, { useCallback } from 'react';
1+
import React, { useCallback } from 'react'
22

3-
import { useBottomScrollListener } from 'react-bottom-scroll-listener';
3+
import { useBottomScrollListener } from 'react-bottom-scroll-listener'
44

55
const HookExample = ({ alertOnBottom }) => {
66
const handleOnDocumentBottom = useCallback(() => {
7-
console.log('I am at bottom! ' + Math.round(performance.now()));
7+
console.log('I am at bottom! ' + Math.round(performance.now()))
88

99
if (alertOnBottom) {
10-
alert('Bottom hit!');
10+
alert('Bottom hit!')
1111
}
12-
}, [alertOnBottom]);
12+
}, [alertOnBottom])
1313

1414
const handleContainerOnBottom = useCallback(() => {
15-
console.log('I am at bottom in optional container! ' + Math.round(performance.now()));
15+
console.log('I am at bottom in optional container! ' + Math.round(performance.now()))
1616

1717
if (alertOnBottom) {
18-
alert('Bottom of this container hit!');
18+
alert('Bottom of this container hit!')
1919
}
20-
}, [alertOnBottom]);
20+
}, [alertOnBottom])
2121

2222
/* This will trigger handleOnDocumentBottom when the body of the page hits the bottom */
23-
useBottomScrollListener(handleOnDocumentBottom);
23+
useBottomScrollListener(handleOnDocumentBottom)
2424

2525
/* This will trigger handleOnContainerBottom when the container that is passed the ref hits the bottom */
26-
const containerRef = useBottomScrollListener(handleContainerOnBottom);
26+
const containerRef = useBottomScrollListener(handleContainerOnBottom)
2727

2828
return (
29-
<div className="root">
30-
<div className="scroll-box">
31-
<h1>Hook example</h1>
32-
<h2>Callback when document hits bottom</h2>
33-
<div>Scroll down! ▼▼▼</div>
34-
<div>A bit more... ▼▼</div>
35-
<div>Almost there... ▼</div>
36-
<div>You've reached the bottom!</div>
29+
<div>
30+
<div
31+
ref={containerRef}
32+
className="md:absolute m-8 md:m-0 top-20 right-12 h-72 md:w-60 bg-purple-200 overflow-auto p-4 border-2 border-purple-950 rounded"
33+
>
34+
<h4 className="font-bold">Callback when this container hits bottom</h4>
35+
<div className="h-44">Scroll down! ▼▼▼</div>
36+
<div className="h-44">A bit more... ▼▼</div>
37+
<div className="h-44">Almost there... ▼</div>
38+
<div className="h-44">You've reached the bottom!</div>
3739
</div>
38-
<div>
39-
<div ref={containerRef} className="inner-scroll-example">
40-
<h4>Callback when this container hits bottom</h4>
41-
<div>Scroll down! ▼▼▼</div>
42-
<div>A bit more... ▼▼</div>
43-
<div>Almost there... ▼</div>
44-
<div>You've reached the bottom!</div>
45-
</div>
40+
<div className="mt-16 m-8">
41+
<h1 className="text-xl font-bold">Hook example</h1>
42+
<h2 className="font-bold">Callback when document hits bottom</h2>
43+
<div className="h-96 border-2 border-purple-950 mt-4 p-4">Scroll down! ▼▼▼</div>
44+
<div className="h-96 border-2 border-purple-950 mt-4 p-4">A bit more... ▼▼</div>
45+
<div className="h-96 border-2 border-purple-950 mt-4 p-4">Almost there... ▼</div>
46+
<div className="h-96 border-2 border-purple-950 mt-4 p-4">You've reached the bottom!</div>
4647
</div>
4748
</div>
48-
);
49-
};
49+
)
50+
}
5051

51-
export default HookExample;
52+
export default HookExample

‎example/src/index.css

Lines changed: 10 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,12 @@
1-
body {
2-
margin: 0;
3-
padding: 0;
4-
font-family: 'Roboto', sans-serif;
5-
background-color: #edf7f5;
6-
}
7-
8-
header {
9-
position: fixed;
10-
top: 0;
11-
left: 0;
12-
width: 100%;
13-
height: 52px;
14-
background-color: #204e5f;
15-
margin: 0;
16-
padding: 0;
17-
z-index: 2;
18-
19-
display: flex;
20-
justify-content: space-between;
21-
align-items: center;
22-
23-
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
24-
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
25-
}
26-
27-
header div,
28-
header span,
29-
header label {
30-
color: white;
31-
}
32-
33-
header h1 {
34-
color: white;
35-
margin-left: 16px;
36-
font-size: 22px;
37-
}
38-
39-
header label {
40-
display: flex;
41-
justify-content: space-between;
42-
align-items: center;
43-
margin: 0 16px;
44-
width: 190px;
45-
}
46-
47-
header label span {
48-
margin: 0 8px;
49-
text-align: right;
50-
width: 100%;
51-
}
52-
53-
header > .right-toggle-box {
54-
display: flex;
55-
}
56-
57-
.root > label > input {
58-
margin: 8px;
59-
height: 24px;
60-
width: 24px;
61-
}
62-
63-
.root > label {
64-
font-size: 16px;
65-
display: flex;
66-
align-items: center;
67-
}
68-
69-
.scroll-box {
70-
margin: 16px;
71-
margin-top: 68px;
72-
padding: 8px;
73-
color: #666;
74-
}
75-
76-
.scroll-box > div {
77-
margin-bottom: 500px;
78-
}
79-
80-
.scroll-box > div:last-of-type {
81-
margin-bottom: 0;
82-
}
83-
84-
.inner-scroll-example {
85-
padding: 8px;
86-
position: absolute;
87-
right: 42px;
88-
top: 84px;
89-
height: 240px;
90-
width: 220px;
91-
border-radius: 3px;
92-
background-color: #b7d7d8;
93-
overflow: auto;
94-
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
95-
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
96-
}
97-
98-
.inner-scroll-example > div {
99-
margin-bottom: 150px;
100-
}
101-
102-
.inner-scroll-example > div:last-of-type {
103-
margin-bottom: 0;
104-
}
105-
106-
@media screen and (max-width: 480px) {
107-
header h1 {
108-
font-size: 16px;
109-
}
110-
111-
header label {
112-
display: none;
113-
}
114-
115-
.inner-scroll-example {
116-
top: 200px;
117-
left: 0;
118-
width: 80%;
119-
transform: translate(10%, 0);
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
@font-face {
7+
font-family: 'Roboto';
8+
font-style: normal;
9+
font-weight: 400;
10+
font-display: swap;
12011
}
12112
}

‎example/tailwind.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
}

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
"scripts": {
4444
"build": "vite build && tsc",
4545
"dev": "vite build --watch",
46-
"build:example": "vite build example --base=/react-bottom-scroll-listener/",
47-
"dev:example": "vite example",
46+
"build:example": "cd example && vite build --base=/react-bottom-scroll-listener/",
47+
"dev:example": "cd example && vite",
4848
"lint": "biome check src",
4949
"test": "vitest --run --coverage",
5050
"prepublish": "run-s build"

0 commit comments

Comments
 (0)