I'm looking to showcase multiple confetti effects using the react-confetti library on a single page.
However, every attempt to do so in my component seems to only display the confetti effect on the last element, rather than all of them. The canvas for the confetti is correctly set for all elements (verified with a background-color).
https://i.stack.imgur.com/SI082.png
So here's my logic:
In my ParentComponent, I iterate over players and create cards for each player. The dimensions of the card are calculated as follows:
const updateCardDimensions = () => {
if (cardRef.current) {
const rect = cardRef.current.getBoundingClientRect();
setCardDimensions({ width: rect.width, height: rect.height });
}
};
useEffect(() => {
// Initial update
updateCardDimensions();
// Attach the resize event listener
window.addEventListener('resize', updateCardDimensions);
// Clean up the event listener
return () => {
window.removeEventListener('resize', updateCardDimensions);
};
}, [cardRef]);
I then iterate over players to create cards for each player.
{gameData.players.map((player) => {
return (
<PlayerCardWithConfetti
key={player.id}
player={player}
cardDimensions={cardDimensions}
winners={winners}
cardRef={cardRef}
.. (removed unnecessary props)
/>
);
})}
Within the PlayerCardWithConfetti component, I use the react-confetti library to generate a confetti effect for winning cards. I also set a backgroundColor to confirm correct canvas setup for the confetti effect (which is fine).
<div key={player.id} className="col-md-4 mb-3">
<div style={{ position: 'relative' }}>
{isPlayerWinner(player.id) && (
<Confetti
style={{backgroundColor: 'blanchedalmond'}}
width={cardDimensions.width}
height={cardDimensions.height}
recycle={true}
key={`confetti-${player.id}`}
/>
)}
<PlayerCard
player={player}
isWinner={winners.some((winner) => winner.id === player.id)}
cardRef={cardRef}
.. (removed unnecessary props)
/>
</div>
</div>
My expectation was to see a confetti effect for each qualifying card, given that the canvases were properly configured. However, the confetti effect only appears on the last card:
https://i.stack.imgur.com/SI082.png
I suspected that the loop might be causing the issue, so I manually recreated the cards but still encountered the same problem – confetti only visible on the last card:
<PlayerCardWithConfetti
key={Math.random()}
player={gameData.players[0]}
cardDimensions={cardDimensions}
winners={winners}
cardRef={cardRef}
.. (removed unnecessary props)
/>
<PlayerCardWithConfetti
key={Math.random()}
player={gameData.players[1]}
cardDimensions={cardDimensions}
winners={winners}
cardRef={cardRef}
.. (removed unnecessary props)
/>
As a test, I utilized two isolated instances of the react-confetti effect unrelated to my components. This experiment successfully displayed one effect at the bottom left corner and another at the bottom right corner without any issues. This leads me to suspect a potential rendering or React-related factor?
If anyone familiar with the react-confetti library can provide insight or assistance, I would greatly appreciate it as I've been grappling with this challenge for the past two days.
Thank you!