Skip to content

Commit 626795d

Browse files
freakdanielfreakdaniel
committed
Landing Stack info updates & fix variables names
1 parent 8e168d2 commit 626795d

8 files changed

Lines changed: 100 additions & 82 deletions

File tree

‎src/constants/Categories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const NEW = [
99
'Grid Scan',
1010
'Floating Lines'
1111
];
12-
export const UPDATED = ['Profile Card', 'Logo Loop'];
12+
export const UPDATED = ['Profile Card', 'Logo Loop', 'Animated Content', 'Fade Content', 'Stack'];
1313

1414
// Used for main sidebar navigation
1515
export const CATEGORIES = [

‎src/constants/Information.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -673,7 +673,7 @@ export const componentMetadata = {
673673
},
674674
'Components/Stack': {
675675
videoUrl: '/assets/video/stack.webm',
676-
description: 'Layered stack with swipe animations and smooth transitions.',
676+
description: 'Layered stack with swipe animations, autoplay and smooth transitions.',
677677
category: 'Components',
678678
name: 'Stack',
679679
docsUrl: 'https://reactbits.dev/components/stack',

‎src/constants/code/Components/stackCode.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,27 @@ export const stack = {
99
usage: `import Stack from './Stack'
1010
1111
const images = [
12-
{ id: 1, img: "https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format" },
13-
{ id: 2, img: "https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format" },
14-
{ id: 3, img: "https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format" },
15-
{ id: 4, img: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format" }
12+
"https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format",
13+
"https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format",
14+
"https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format",
15+
"https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format"
1616
];
17-
18-
<Stack
19-
randomRotation={true}
20-
sensitivity={180}
21-
sendToBackOnClick={false}
22-
cardDimensions={{ width: 200, height: 200 }}
23-
cardsData={images}
24-
/>`,
17+
18+
<div style={{ width: 208, height: 208 }}>
19+
<Stack
20+
randomRotation={true}
21+
sensitivity={180}
22+
sendToBackOnClick={true}
23+
cards={images.map((src, i) => (
24+
<img
25+
key={i}
26+
src={src}
27+
alt={\`card-\${i + 1}\`}
28+
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
29+
/>
30+
))}
31+
/>
32+
</div>`,
2533
code,
2634
css,
2735
tailwind,

‎src/content/Components/Stack/Stack.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ export default function Stack({
4646
cards = [],
4747
animationConfig = { stiffness: 260, damping: 20 },
4848
sendToBackOnClick = false,
49-
autoAnimate = false,
50-
autoInterval = 3000,
49+
autoplay = false,
50+
autoplayDelay = 3000,
5151
mobileClickOnly = false,
5252
mobileBreakpoint = 768,
5353
}) {
@@ -134,15 +134,15 @@ export default function Stack({
134134
};
135135

136136
useEffect(() => {
137-
if (autoAnimate && stack.length > 1) {
137+
if (autoplay && stack.length > 1) {
138138
const interval = setInterval(() => {
139139
const topCardId = stack[stack.length - 1].id;
140140
sendToBack(topCardId);
141-
}, autoInterval);
141+
}, autoplayDelay);
142142

143143
return () => clearInterval(interval);
144144
}
145-
}, [autoAnimate, autoInterval, stack]);
145+
}, [autoplay, autoplayDelay, stack]);
146146

147147
return (
148148
<div

‎src/demo/Components/StackDemo.jsx‎

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import { stack } from '../../constants/code/Components/stackCode';
1616
const StackDemo = () => {
1717
const [randomRotation, setRandomRotation] = useState(false);
1818
const [sensitivity, setSensitivity] = useState(200);
19-
const [cardWidth, setCardWidth] = useState(208);
20-
const [cardHeight, setCardHeight] = useState(208);
19+
const [autoplay, setAutoplay] = useState(false);
20+
const [autoplayDelay, setAutoplayDelay] = useState(3000);
2121
const [key, forceRerender] = useForceRerender();
2222

2323
const propData = [
@@ -33,50 +33,66 @@ const StackDemo = () => {
3333
default: 200,
3434
description: 'Drag sensitivity for sending a card to the back.'
3535
},
36-
{
37-
name: 'cardDimensions',
38-
type: 'object',
39-
default: '{ width: 208, height: 208 }',
40-
description: 'Defines the width and height of the cards.'
41-
},
4236
{
4337
name: 'sendToBackOnClick',
4438
type: 'boolean',
4539
default: 'false',
46-
description: 'When enabled, the also stack shifts to the next card on click.'
40+
description: 'When enabled, the stack also shifts to the next card on click.'
4741
},
4842
{
49-
name: 'cardsData',
50-
type: 'array',
43+
name: 'cards',
44+
type: 'ReactNode[]',
5145
default: '[]',
52-
description: 'The array of card data, including `id` and `img` properties.'
46+
description: 'The array of card elements to display in the stack.'
5347
},
5448
{
5549
name: 'animationConfig',
5650
type: 'object',
5751
default: '{ stiffness: 260, damping: 20 }',
5852
description: "Configures the spring animation's stiffness and damping."
53+
},
54+
{
55+
name: 'autoplay',
56+
type: 'boolean',
57+
default: 'false',
58+
description: 'When enabled, the stack automatically cycles through cards.'
59+
},
60+
{
61+
name: 'autoplayDelay',
62+
type: 'number',
63+
default: '3000',
64+
description: 'Delay in milliseconds between automatic card transitions.'
5965
}
6066
];
6167

6268
const images = [
63-
{ id: 1, img: 'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format' },
64-
{ id: 2, img: 'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format' },
65-
{ id: 3, img: 'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format' },
66-
{ id: 4, img: 'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format' }
69+
'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format',
70+
'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format',
71+
'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format',
72+
'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format'
6773
];
6874

6975
return (
7076
<TabsLayout>
7177
<PreviewTab>
7278
<Box position="relative" className="demo-container" minH={400} overflow="hidden">
73-
<Stack
74-
key={key}
75-
randomRotation={randomRotation}
76-
sensitivity={sensitivity}
77-
cardDimensions={{ width: cardWidth, height: cardHeight }}
78-
cardsData={images}
79-
/>
79+
<div style={{ width: 208, height: 208 }}>
80+
<Stack
81+
key={key}
82+
randomRotation={randomRotation}
83+
sensitivity={sensitivity}
84+
autoplay={autoplay}
85+
autoplayDelay={autoplayDelay}
86+
cards={images.map((src, i) => (
87+
<img
88+
key={i}
89+
src={src}
90+
alt={`card-${i + 1}`}
91+
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
92+
/>
93+
))}
94+
/>
95+
</div>
8096
</Box>
8197

8298
<Customize>
@@ -89,6 +105,14 @@ const StackDemo = () => {
89105
}}
90106
/>
91107

108+
<PreviewSwitch
109+
title="Autoplay"
110+
isChecked={autoplay}
111+
onChange={checked => {
112+
setAutoplay(checked);
113+
}}
114+
/>
115+
92116
<PreviewSlider
93117
title="Sensitivity"
94118
min={100}
@@ -102,29 +126,15 @@ const StackDemo = () => {
102126
/>
103127

104128
<PreviewSlider
105-
title="Card Width"
106-
min={150}
107-
max={300}
108-
step={10}
109-
value={cardWidth}
129+
title="Autoplay Delay"
130+
min={1000}
131+
max={5000}
132+
step={500}
133+
value={autoplayDelay}
110134
onChange={val => {
111-
setCardWidth(val);
112-
forceRerender();
113-
}}
114-
displayValue={val => `${val}px`}
115-
/>
116-
117-
<PreviewSlider
118-
title="Card Height"
119-
min={150}
120-
max={300}
121-
step={10}
122-
value={cardHeight}
123-
onChange={val => {
124-
setCardHeight(val);
125-
forceRerender();
135+
setAutoplayDelay(val);
126136
}}
127-
displayValue={val => `${val}px`}
137+
displayValue={val => `${val}ms`}
128138
/>
129139
</Customize>
130140

‎src/tailwind/Components/Stack/Stack.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ export default function Stack({
4848
cards = [],
4949
animationConfig = { stiffness: 260, damping: 20 },
5050
sendToBackOnClick = false,
51-
autoAnimate = false,
52-
autoInterval = 3000,
51+
autoplay = false,
52+
autoplayDelay = 3000,
5353
mobileClickOnly = false,
5454
mobileBreakpoint = 768,
5555
}) {
@@ -136,15 +136,15 @@ export default function Stack({
136136
};
137137

138138
useEffect(() => {
139-
if (autoAnimate && stack.length > 1) {
139+
if (autoplay && stack.length > 1) {
140140
const interval = setInterval(() => {
141141
const topCardId = stack[stack.length - 1].id;
142142
sendToBack(topCardId);
143-
}, autoInterval);
143+
}, autoplayDelay);
144144

145145
return () => clearInterval(interval);
146146
}
147-
}, [autoAnimate, autoInterval, stack]);
147+
}, [autoplay, autoplayDelay, stack]);
148148

149149
return (
150150
<div

‎src/ts-default/Components/Stack/Stack.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ interface StackProps {
5353
sendToBackOnClick?: boolean;
5454
cards?: React.ReactNode[];
5555
animationConfig?: { stiffness: number; damping: number };
56-
autoAnimate?: boolean;
57-
autoInterval?: number;
56+
autoplay?: boolean;
57+
autoplayDelay?: number;
5858
mobileClickOnly?: boolean;
5959
mobileBreakpoint?: number;
6060
}
@@ -65,8 +65,8 @@ export default function Stack({
6565
cards = [],
6666
animationConfig = { stiffness: 260, damping: 20 },
6767
sendToBackOnClick = false,
68-
autoAnimate = false,
69-
autoInterval = 3000,
68+
autoplay = false,
69+
autoplayDelay = 3000,
7070
mobileClickOnly = false,
7171
mobileBreakpoint = 768,
7272
}: StackProps) {
@@ -153,15 +153,15 @@ export default function Stack({
153153
};
154154

155155
useEffect(() => {
156-
if (autoAnimate && stack.length > 1) {
156+
if (autoplay && stack.length > 1) {
157157
const interval = setInterval(() => {
158158
const topCardId = stack[stack.length - 1].id;
159159
sendToBack(topCardId);
160-
}, autoInterval);
160+
}, autoplayDelay);
161161

162162
return () => clearInterval(interval);
163163
}
164-
}, [autoAnimate, autoInterval, stack]);
164+
}, [autoplay, autoplayDelay, stack]);
165165

166166
return (
167167
<div

‎src/ts-tailwind/Components/Stack/Stack.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ interface StackProps {
5555
sendToBackOnClick?: boolean;
5656
cards?: React.ReactNode[];
5757
animationConfig?: { stiffness: number; damping: number };
58-
autoAnimate?: boolean;
59-
autoInterval?: number;
58+
autoplay?: boolean;
59+
autoplayDelay?: number;
6060
mobileClickOnly?: boolean;
6161
mobileBreakpoint?: number;
6262
}
@@ -67,8 +67,8 @@ export default function Stack({
6767
cards = [],
6868
animationConfig = { stiffness: 260, damping: 20 },
6969
sendToBackOnClick = false,
70-
autoAnimate = false,
71-
autoInterval = 3000,
70+
autoplay = false,
71+
autoplayDelay = 3000,
7272
mobileClickOnly = false,
7373
mobileBreakpoint = 768,
7474
}: StackProps) {
@@ -155,15 +155,15 @@ export default function Stack({
155155
};
156156

157157
useEffect(() => {
158-
if (autoAnimate && stack.length > 1) {
158+
if (autoplay && stack.length > 1) {
159159
const interval = setInterval(() => {
160160
const topCardId = stack[stack.length - 1].id;
161161
sendToBack(topCardId);
162-
}, autoInterval);
162+
}, autoplayDelay);
163163

164164
return () => clearInterval(interval);
165165
}
166-
}, [autoAnimate, autoInterval, stack]);
166+
}, [autoplay, autoplayDelay, stack]);
167167

168168
return (
169169
<div

0 commit comments

Comments
 (0)