a tool for shared writing and social publishing
calculated exact widths for spacer divs on either side of the card carousel
this ensures that the first and last cards in the sequence can scroll to the center of the page, rather than be stuck to the edges of the scroll container
i also installed react-use-measure to acheive this
+49
-21
+28
-19
app/test/page.tsx
+28
-19
app/test/page.tsx
···
3
3
import { Home } from "../../components/Icons";
4
4
import { ButtonPrimary } from "../../components/Buttons";
5
5
import { useState } from "react";
6
+
import useMeasure from "react-use-measure";
6
7
7
8
export default function Index() {
9
+
let [cardRef, { width: cardWidth }] = useMeasure();
10
+
let [spacerRef, { width: spacerWidth }] = useMeasure();
11
+
8
12
let [cardTwo, setCardTwo] = useState(false);
9
13
let [cardMany, setCardMany] = useState(false);
10
14
···
23
27
</div>
24
28
25
29
<div className="pageContentWrapper w-full overflow-x-scroll snap-mandatory snap-x grow items-stretch flex ">
26
-
<div className="pageContent flex mx-auto px-4">
27
-
<div className="w-[600px]" />
28
-
<Card first>
29
-
<ButtonPrimary
30
-
onClick={() => {
31
-
setCardTwo(!cardTwo);
32
-
}}
33
-
>
34
-
toggle card 2
35
-
</ButtonPrimary>
36
-
<ButtonPrimary
37
-
onClick={() => {
38
-
setCardMany(!cardMany);
39
-
}}
40
-
>
41
-
toggle card many
42
-
</ButtonPrimary>
43
-
</Card>
30
+
<div className="pageContent flex mx-auto">
31
+
<div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} />
32
+
<div className="h-full flex items-stretch" ref={cardRef}>
33
+
<Card first>
34
+
<ButtonPrimary
35
+
onClick={() => {
36
+
setCardTwo(!cardTwo);
37
+
}}
38
+
>
39
+
toggle card 2
40
+
</ButtonPrimary>
41
+
<ButtonPrimary
42
+
onClick={() => {
43
+
setCardMany(!cardMany);
44
+
}}
45
+
>
46
+
toggle card many
47
+
</ButtonPrimary>
48
+
</Card>
49
+
</div>
44
50
{cardTwo && <Card>Card 2</Card>}
45
51
{cardMany && (
46
52
<>
···
52
58
<Card>Card 7</Card>
53
59
</>
54
60
)}
55
-
<div className="w-[600px]" />
61
+
<div
62
+
ref={spacerRef}
63
+
style={{ width: `calc((100vw / 2) - ${cardWidth}px)` }}
64
+
/>
56
65
</div>
57
66
</div>
58
67
</div>
+19
-1
package-lock.json
+19
-1
package-lock.json
···
11
11
"dependencies": {
12
12
"next": "^14.2.3",
13
13
"react": "^18.3.1",
14
-
"react-dom": "^18.3.1"
14
+
"react-dom": "^18.3.1",
15
+
"react-use-measure": "^2.1.1"
15
16
},
16
17
"devDependencies": {
17
18
"@cloudflare/workers-types": "^4.20240512.0",
···
1243
1244
"node": ">= 12"
1244
1245
}
1245
1246
},
1247
+
"node_modules/debounce": {
1248
+
"version": "1.2.1",
1249
+
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
1250
+
"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
1251
+
},
1246
1252
"node_modules/debug": {
1247
1253
"version": "4.3.4",
1248
1254
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
···
2341
2347
},
2342
2348
"peerDependencies": {
2343
2349
"react": "^18.3.1"
2350
+
}
2351
+
},
2352
+
"node_modules/react-use-measure": {
2353
+
"version": "2.1.1",
2354
+
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
2355
+
"integrity": "sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==",
2356
+
"dependencies": {
2357
+
"debounce": "^1.2.1"
2358
+
},
2359
+
"peerDependencies": {
2360
+
"react": ">=16.13",
2361
+
"react-dom": ">=16.13"
2344
2362
}
2345
2363
},
2346
2364
"node_modules/read-cache": {