Better cleanup

[danmindru]

hey Vladimir, Thanks for the neat little lib!

Saw the implementation of clearCanvas() based on https://github.com/loonywizard/js-confetti/issues/46, but this is not exactly what @lifenautjoe was asking for, I think.

clearCanvas() removes the confetti but the canvases keep stacking. So if you have a button that shows confetti you'll get a bunch of empty canvases.

Maybe we need a destroyCanvas() or something like that? Alternatively clearCanvas() could also remove the canvas element from the DOM. Happy to raise a PR if you want to get it in.

[ghost]

I fixed this using

React.useEffect(() => {
    setJsConfetti(new JSConfetti());
  }, []);

  function fire() {
    if (jsConfetti) {
      jsConfetti.addConfetti({
        emojis: ["✨", "💫", "🌈", "🍉"],
        emojiSize: 60,
        confettiNumber: 20,
      });
      // enable vibration support
      navigator.vibrate =
        navigator.vibrate ||
        navigator.webkitVibrate ||
        navigator.mozVibrate ||
        navigator.msVibrate;

      if (navigator.vibrate) {
        // vibration API supported
        navigator.vibrate(100);
      }
    }
    if (jsConfetti) {
      jsConfetti.addConfetti({
        emojis: ["✨", "💫", "🌈", "🍉"],
        emojiSize: 60,
        confettiNumber: 20,
      });
    }
  }