Skip to content

Conversation

@freakdaniel
Copy link
Contributor

I completely reworked the Stack component 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

  1. Content Architecture & Flexibility
    Before: Component required structured cardsData (array of objects with id and img) 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)

  2. Autoplay & Interaction Control
    Added autoplay (boolean) and autoplayDelay (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 experience

  3. Layout & Responsiveness
    Before: Required explicit cardDimensions prop, making responsiveness difficult and limiting component flexibility.
    After: Removed cardDimensions. The component now uses w-full / h-full internally 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 like w-1/2 or aspect-square on the wrapper)

  4. Content Update Handling (i18n Ready)
    Implemented useEffect to watch the number of children.
    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 changes

Testing

  1. Verify that arbitrary React nodes (e.g., divs with text, not just images) render and stack correctly
  2. Test the autoplay={true} prop and ensure cards cycle automatically every autoplayDelay milliseconds
  3. Verify that hovering the mouse over the stack successfully pauses the automatic cycling
  4. Test drag and click functionality to ensure the top card moves to the back correctly
  5. Check responsiveness by placing the component in a fluid container (e.g., w-1/2) to confirm card size adapts

- Updated Stack component to manage dragging state and autoplay functionality
- Removed Stack.css file and integrated styles directly into the component
- Modified CardRotate to accept a setDragging prop for better state management
- Improved rendering logic to handle children as props, allowing for dynamic content
- Added autoplay feature to automatically send cards to the back after a delay
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant