Refactor Stack: Content Flexibility, Autoplay and Layout Sync #747
+360
−300
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I completely reworked the
Stackcomponent to make it flexible when working with arbitrary content (children), add the necessary autoplay functionality & synchronize content processing (e.g., for i18n)AND AGAIN KEY CHANGES
Content Architecture & Flexibility
Before: Component required structured
cardsData(array of objects withidandimg) and manually rendered<img>tags.After: Switched to accepting arbitrary
children(React.ReactNode[]). The component now manages the order of the children's indices internally, making it a flexible container for any content (images, forms, custom UI)Autoplay & Interaction Control
Added
autoplay(boolean) andautoplayDelay(number, ms) props to enable automatic card cycling.Autoplay is automatically paused when the user interacts with the stack (drag start) or hovers the mouse over the container (
onMouseEnter), ensuring a better user experienceLayout & Responsiveness
Before: Required explicit
cardDimensionsprop, making responsiveness difficult and limiting component flexibility.After: Removed
cardDimensions. The component now usesw-full/h-fullinternally and relies on the CSS dimensions of the parent container to define the card size. This allows for native CSS responsiveness (e.g., using Tailwind classes likew-1/2oraspect-squareon the wrapper)Content Update Handling (i18n Ready)
Implemented
useEffectto watch the number ofchildren.Technical explanation: If the content inside the cards changes (e.g., text translation via
i18n), the component re-renders the children without losing the current stack order or interrupting the ongoing animation. The order is reset only if the count of cards changesTesting
autoplay={true}prop and ensure cards cycle automatically everyautoplayDelaymillisecondsw-1/2) to confirm card size adapts