Feature Request; Add prop(boolean) to control whether show confetti animation on first render

[FaizanMostafa]

Hi there, thanks for this wonderful package. I came across this scenario where I don't want to show the play the confetti animation on Confetti's first render. I want to play the confetti animation only when user presses a specific button on the webpage. So far I am unable to achieve this functionality. I am using the following code!

ConfettiComponent.js

import React from 'react';
import {useWindowSize} from 'react-use';
import Confetti from 'react-confetti';

const ConfettiComponent = (props) => {
  const { width, height } = useWindowSize();

  return (
    <Confetti
      {...props}
      width={width}
      height={height}
    />
  )
}

export default ConfettiComponent;

ProfilePage.js

import React, {useState} from 'react';

const ProfilePage = () => {
  const {showConfetti, setShowConfetti} = useState(false);

  const handleOnPressBucketShare = () => {
    setShowConfetti(true);
    setTimeout(() => {
      setShowConfetti(false);
    }, 3000);
  }

  return (
    <div>
      ...
      <button onClick={handleOnPressBucketShare}>Play Animation</button>
      <ConfettiComponent recycle={showConfetti} />
      ...
    </div>
  );
}

[OG84]

what about

...
{showConfetti && <ConfettiComponent />}

[alampros]

Hi there - sorry for the horribly delayed response (new job). Either conditional rendering (like @OG84 mentioned above) or conditionally switching the numberOfPieces prop would work for your scenario. Take a look at the party mode demo for how to do this.