confetti-react - npm Package Compare versions

Comparing version 2.4.4 to 2.5.0

dist/CircleClass.d.ts

@@ -0,0 +0,0 @@ import { Point } from './Point';

dist/confetti-react.esm.js

 import React, { Component } from 'react';
+import tweens from 'tween-functions';
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
 function _defineProperties(target, props) {
@@ -25,17 +20,2 @@ for (var i = 0; i < props.length; i++) {
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _extends() {
@@ -59,58 +39,9 @@ _extends = Object.assign || function (target) {
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
 
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
+  _setPrototypeOf(subClass, superClass);
 }
 
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
 function _setPrototypeOf(o, p) {
@@ -125,328 +56,2 @@ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
-
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance");
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
-// t: current time, b: beginning value, _c: final value, d: total duration
-var tweenFunctions = {
-  linear: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * t / d + b;
-  },
-  easeInQuad: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * (t /= d) * t + b;
-  },
-  easeOutQuad: function(t, b, _c, d) {
-    var c = _c - b;
-    return -c * (t /= d) * (t - 2) + b;
-  },
-  easeInOutQuad: function(t, b, _c, d) {
-    var c = _c - b;
-    if ((t /= d / 2) < 1) {
-      return c / 2 * t * t + b;
-    } else {
-      return -c / 2 * ((--t) * (t - 2) - 1) + b;
-    }
-  },
-  easeInCubic: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * (t /= d) * t * t + b;
-  },
-  easeOutCubic: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * ((t = t / d - 1) * t * t + 1) + b;
-  },
-  easeInOutCubic: function(t, b, _c, d) {
-    var c = _c - b;
-    if ((t /= d / 2) < 1) {
-      return c / 2 * t * t * t + b;
-    } else {
-      return c / 2 * ((t -= 2) * t * t + 2) + b;
-    }
-  },
-  easeInQuart: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * (t /= d) * t * t * t + b;
-  },
-  easeOutQuart: function(t, b, _c, d) {
-    var c = _c - b;
-    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
-  },
-  easeInOutQuart: function(t, b, _c, d) {
-    var c = _c - b;
-    if ((t /= d / 2) < 1) {
-      return c / 2 * t * t * t * t + b;
-    } else {
-      return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
-    }
-  },
-  easeInQuint: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * (t /= d) * t * t * t * t + b;
-  },
-  easeOutQuint: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
-  },
-  easeInOutQuint: function(t, b, _c, d) {
-    var c = _c - b;
-    if ((t /= d / 2) < 1) {
-      return c / 2 * t * t * t * t * t + b;
-    } else {
-      return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
-    }
-  },
-  easeInSine: function(t, b, _c, d) {
-    var c = _c - b;
-    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
-  },
-  easeOutSine: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * Math.sin(t / d * (Math.PI / 2)) + b;
-  },
-  easeInOutSine: function(t, b, _c, d) {
-    var c = _c - b;
-    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
-  },
-  easeInExpo: function(t, b, _c, d) {
-    var c = _c - b;
-    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
-  },
-  easeOutExpo: function(t, b, _c, d) {
-    var c = _c - b;
-    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
-  },
-  easeInOutExpo: function(t, b, _c, d) {
-    var c = _c - b;
-    if (t === 0) {
-      return b;
-    }
-    if (t === d) {
-      return b + c;
-    }
-    if ((t /= d / 2) < 1) {
-      return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
-    } else {
-      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
-    }
-  },
-  easeInCirc: function(t, b, _c, d) {
-    var c = _c - b;
-    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
-  },
-  easeOutCirc: function(t, b, _c, d) {
-    var c = _c - b;
-    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
-  },
-  easeInOutCirc: function(t, b, _c, d) {
-    var c = _c - b;
-    if ((t /= d / 2) < 1) {
-      return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
-    } else {
-      return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
-    }
-  },
-  easeInElastic: function(t, b, _c, d) {
-    var c = _c - b;
-    var a, p, s;
-    s = 1.70158;
-    p = 0;
-    a = c;
-    if (t === 0) {
-      return b;
-    } else if ((t /= d) === 1) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * 0.3;
-    }
-    if (a < Math.abs(c)) {
-      a = c;
-      s = p / 4;
-    } else {
-      s = p / (2 * Math.PI) * Math.asin(c / a);
-    }
-    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
-  },
-  easeOutElastic: function(t, b, _c, d) {
-    var c = _c - b;
-    var a, p, s;
-    s = 1.70158;
-    p = 0;
-    a = c;
-    if (t === 0) {
-      return b;
-    } else if ((t /= d) === 1) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * 0.3;
-    }
-    if (a < Math.abs(c)) {
-      a = c;
-      s = p / 4;
-    } else {
-      s = p / (2 * Math.PI) * Math.asin(c / a);
-    }
-    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
-  },
-  easeInOutElastic: function(t, b, _c, d) {
-    var c = _c - b;
-    var a, p, s;
-    s = 1.70158;
-    p = 0;
-    a = c;
-    if (t === 0) {
-      return b;
-    } else if ((t /= d / 2) === 2) {
-      return b + c;
-    }
-    if (!p) {
-      p = d * (0.3 * 1.5);
-    }
-    if (a < Math.abs(c)) {
-      a = c;
-      s = p / 4;
-    } else {
-      s = p / (2 * Math.PI) * Math.asin(c / a);
-    }
-    if (t < 1) {
-      return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
-    } else {
-      return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
-    }
-  },
-  easeInBack: function(t, b, _c, d, s) {
-    var c = _c - b;
-    if (s === void 0) {
-      s = 1.70158;
-    }
-    return c * (t /= d) * t * ((s + 1) * t - s) + b;
-  },
-  easeOutBack: function(t, b, _c, d, s) {
-    var c = _c - b;
-    if (s === void 0) {
-      s = 1.70158;
-    }
-    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
-  },
-  easeInOutBack: function(t, b, _c, d, s) {
-    var c = _c - b;
-    if (s === void 0) {
-      s = 1.70158;
-    }
-    if ((t /= d / 2) < 1) {
-      return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
-    } else {
-      return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
-    }
-  },
-  easeInBounce: function(t, b, _c, d) {
-    var c = _c - b;
-    var v;
-    v = tweenFunctions.easeOutBounce(d - t, 0, c, d);
-    return c - v + b;
-  },
-  easeOutBounce: function(t, b, _c, d) {
-    var c = _c - b;
-    if ((t /= d) < 1 / 2.75) {
-      return c * (7.5625 * t * t) + b;
-    } else if (t < 2 / 2.75) {
-      return c * (7.5625 * (t -= 1.5 / 2.75) * t + 0.75) + b;
-    } else if (t < 2.5 / 2.75) {
-      return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b;
-    } else {
-      return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;
-    }
-  },
-  easeInOutBounce: function(t, b, _c, d) {
-    var c = _c - b;
-    var v;
-    if (t < d / 2) {
-      v = tweenFunctions.easeInBounce(t * 2, 0, c, d);
-      return v * 0.5 + b;
-    } else {
-      v = tweenFunctions.easeOutBounce(t * 2 - d, 0, c, d);
-      return v * 0.5 + c * 0.5 + b;
-    }
-  }
-};
-
-var tweenFunctions_1 = tweenFunctions;
-
 function degreesToRads(degrees) {
@@ -479,19 +84,2 @@ return degrees * Math.PI / 180;
   function Particle(context, getOptions, x, y) {
-    _classCallCheck(this, Particle);
-
-    this.context = void 0;
-    this.radius = void 0;
-    this.x = void 0;
-    this.y = void 0;
-    this.w = void 0;
-    this.h = void 0;
-    this.vx = void 0;
-    this.vy = void 0;
-    this.shape = void 0;
-    this.angle = void 0;
-    this.angularSpin = void 0;
-    this.color = void 0;
-    this.rotateY = void 0;
-    this.rotationDirection = void 0;
-    this.getOptions = void 0;
     this.getOptions = getOptions;
@@ -520,87 +108,81 @@
 
-  _createClass(Particle, [{
-    key: "update",
-    value: function update() {
-      var _this$getOptions2 = this.getOptions(),
-          gravity = _this$getOptions2.gravity,
-          wind = _this$getOptions2.wind,
-          friction = _this$getOptions2.friction,
-          opacity = _this$getOptions2.opacity,
-          drawShape = _this$getOptions2.drawShape;
+  var _proto = Particle.prototype;
 
-      this.x += this.vx;
-      this.y += this.vy;
-      this.vy += gravity;
-      this.vx += wind;
-      this.vx *= friction;
-      this.vy *= friction;
+  _proto.update = function update() {
+    var _this$getOptions2 = this.getOptions(),
+        gravity = _this$getOptions2.gravity,
+        wind = _this$getOptions2.wind,
+        friction = _this$getOptions2.friction,
+        opacity = _this$getOptions2.opacity,
+        drawShape = _this$getOptions2.drawShape;
 
-      if (this.rotateY >= 1 && this.rotationDirection === RotationDirection.Positive) {
-        this.rotationDirection = RotationDirection.Negative;
-      } else if (this.rotateY <= -1 && this.rotationDirection === RotationDirection.Negative) {
-        this.rotationDirection = RotationDirection.Positive;
-      }
+    this.x += this.vx;
+    this.y += this.vy;
+    this.vy += gravity;
+    this.vx += wind;
+    this.vx *= friction;
+    this.vy *= friction;
 
-      var rotateDelta = 0.1 * this.rotationDirection;
-      this.rotateY += rotateDelta;
-      this.angle += this.angularSpin;
-      this.context.save();
-      this.context.translate(this.x, this.y);
-      this.context.rotate(this.angle);
-      this.context.scale(1, this.rotateY);
-      this.context.rotate(this.angle);
-      this.context.beginPath();
-      this.context.fillStyle = this.color;
-      this.context.strokeStyle = this.color;
-      this.context.globalAlpha = opacity;
-      this.context.lineCap = 'round';
-      this.context.lineWidth = 2;
+    if (this.rotateY >= 1 && this.rotationDirection === RotationDirection.Positive) {
+      this.rotationDirection = RotationDirection.Negative;
+    } else if (this.rotateY <= -1 && this.rotationDirection === RotationDirection.Negative) {
+      this.rotationDirection = RotationDirection.Positive;
+    }
 
-      if (drawShape && typeof drawShape === 'function') {
-        drawShape.call(this, this.context);
-      } else {
-        switch (this.shape) {
-          case ParticleShape.Circle:
-            {
-              this.context.beginPath();
-              this.context.arc(0, 0, this.radius, 0, 2 * Math.PI);
-              this.context.fill();
-              break;
-            }
+    var rotateDelta = 0.1 * this.rotationDirection;
+    this.rotateY += rotateDelta;
+    this.angle += this.angularSpin;
+    this.context.save();
+    this.context.translate(this.x, this.y);
+    this.context.rotate(this.angle);
+    this.context.scale(1, this.rotateY);
+    this.context.rotate(this.angle);
+    this.context.beginPath();
+    this.context.fillStyle = this.color;
+    this.context.strokeStyle = this.color;
+    this.context.globalAlpha = opacity;
+    this.context.lineCap = 'round';
+    this.context.lineWidth = 2;
 
-          case ParticleShape.Square:
-            {
-              this.context.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
-              break;
-            }
+    if (drawShape && typeof drawShape === 'function') {
+      drawShape.call(this, this.context);
+    } else {
+      switch (this.shape) {
+        case ParticleShape.Circle:
+          {
+            this.context.beginPath();
+            this.context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+            this.context.fill();
+            break;
+          }
 
-          case ParticleShape.Strip:
-            {
-              this.context.fillRect(-this.w / 6, -this.h / 2, this.w / 3, this.h);
-              break;
-            }
+        case ParticleShape.Square:
+          {
+            this.context.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
+            break;
+          }
 
-          default:
-            {
-              throw new Error('Unknown type in Particle.ts');
-            }
-        }
+        case ParticleShape.Strip:
+          {
+            this.context.fillRect(-this.w / 6, -this.h / 2, this.w / 3, this.h);
+            break;
+          }
+
+        default:
+          {
+            throw new Error('Unknown type in Particle.ts');
+          }
       }
-
-      this.context.closePath();
-      this.context.restore();
     }
-  }]);
 
+    this.context.closePath();
+    this.context.restore();
+  };
+
   return Particle;
 }();
 
-var ParticleGeneratorClass = function ParticleGeneratorClass(_canvas, getOptions) {
+var ParticleGeneratorClass = function ParticleGeneratorClass(canvas, getOptions) {
   var _this = this;
 
-  _classCallCheck(this, ParticleGeneratorClass);
-
-  this.canvas = void 0;
-  this.context = void 0;
-  this.getOptions = void 0;
   this.x = 0;
@@ -673,3 +255,3 @@ this.y = 0;
       context.textAlign = 'right';
-      context.fillText("Particles: ".concat(nP), canvas.width - 10, canvas.height - 20);
+      context.fillText("Particles: " + nP, canvas.width - 10, canvas.height - 20);
     } // Maintain the population
@@ -695,3 +277,3 @@
 
-  this.canvas = _canvas;
+  this.canvas = canvas;
   var ctx = this.canvas.getContext('2d');
@@ -719,3 +301,3 @@
   debug: false,
-  tweenFunction: tweenFunctions_1.easeInOutQuad,
+  tweenFunction: tweens.easeInOutQuad,
   tweenDuration: 5000,
@@ -726,13 +308,5 @@ recycle: true,
 var Confetti = /*#__PURE__*/function () {
-  function Confetti(_canvas, _opts) {
+  function Confetti(canvas, opts) {
     var _this = this;
 
-    _classCallCheck(this, Confetti);
-
-    this.canvas = void 0;
-    this.context = void 0;
-    this._options = void 0;
-    this.generator = void 0;
-    this.rafId = void 0;
-
     this.setOptionsWithDefaults = function (opts) {
@@ -747,3 +321,3 @@ var computedConfettiDefaults = {
       };
-      _this._options = _objectSpread2({}, computedConfettiDefaults, {}, confettiDefaults, {}, opts);
+      _this._options = _extends({}, computedConfettiDefaults, confettiDefaults, opts);
       Object.assign(_this, opts.confettiSource);
@@ -794,3 +368,3 @@ };
 
-    this.canvas = _canvas;
+    this.canvas = canvas;
     var ctx = this.canvas.getContext('2d');
@@ -806,3 +380,3 @@
     });
-    this.options = _opts;
+    this.options = opts;
     this.update();
@@ -838,3 +412,3 @@ }
 
-var ref = React.createRef();
+var ref = /*#__PURE__*/React.createRef();
 
@@ -845,3 +419,3 @@ function extractCanvasProps(props) {
   var rest = {};
-  var confettiOptionKeys = [].concat(_toConsumableArray(Object.keys(confettiDefaults)), ['confettiSource', 'drawShape', 'onConfettiComplete']);
+  var confettiOptionKeys = [].concat(Object.keys(confettiDefaults), ['confettiSource', 'drawShape', 'onConfettiComplete']);
   var refProps = ['canvasRef'];
@@ -863,11 +437,7 @@ Object.keys(props).forEach(function (prop) {
 var ConfettiReactInternal = /*#__PURE__*/function (_Component) {
-  _inherits(ConfettiReactInternal, _Component);
+  _inheritsLoose(ConfettiReactInternal, _Component);
 
   function ConfettiReactInternal(props) {
-    var _getPrototypeOf2;
-
     var _this;
 
-    _classCallCheck(this, ConfettiReactInternal);
-
     for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -877,5 +447,4 @@ rest[_key - 1] = arguments[_key];
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ConfettiReactInternal)).call.apply(_getPrototypeOf2, [this, props].concat(rest)));
+    _this = _Component.call.apply(_Component, [this, props].concat(rest)) || this;
     _this.canvas = React.createRef();
-    _this.confetti = void 0;
     _this.canvas = props.canvasRef || ref;
@@ -885,64 +454,59 @@ return _this;
 
-  _createClass(ConfettiReactInternal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.canvas.current) {
-        var opts = extractCanvasProps(this.props)[0];
-        this.confetti = new Confetti(this.canvas.current, opts);
-      }
+  var _proto = ConfettiReactInternal.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.canvas.current) {
+      var opts = extractCanvasProps(this.props)[0];
+      this.confetti = new Confetti(this.canvas.current, opts);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var confettiOptions = extractCanvasProps(this.props)[0];
+  };
 
-      if (this.confetti) {
-        this.confetti.options = confettiOptions;
-      }
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    var confettiOptions = extractCanvasProps(this.props)[0];
+
+    if (this.confetti) {
+      this.confetti.options = confettiOptions;
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.confetti) {
-        this.confetti.stop();
-      }
+  };
 
-      this.confetti = undefined;
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.confetti) {
+      this.confetti.stop();
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _extractCanvasProps = extractCanvasProps(this.props),
-          _extractCanvasProps2 = _slicedToArray(_extractCanvasProps, 2),
-          confettiOptions = _extractCanvasProps2[0],
-          passedProps = _extractCanvasProps2[1];
 
-      var canvasStyles = _objectSpread2({
-        zIndex: 2,
-        position: 'absolute',
-        pointerEvents: 'none',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0
-      }, passedProps.style);
+    this.confetti = undefined;
+  };
 
-      return React.createElement("canvas", _extends({
-        width: confettiOptions.width,
-        height: confettiOptions.height,
-        ref: this.canvas
-      }, passedProps, {
-        style: canvasStyles
-      }));
-    }
-  }]);
+  _proto.render = function render() {
+    var _extractCanvasProps = extractCanvasProps(this.props),
+        confettiOptions = _extractCanvasProps[0],
+        passedProps = _extractCanvasProps[1];
 
+    var canvasStyles = _extends({
+      zIndex: 2,
+      position: 'absolute',
+      pointerEvents: 'none',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    }, passedProps.style);
+
+    return React.createElement("canvas", Object.assign({
+      width: confettiOptions.width,
+      height: confettiOptions.height,
+      ref: this.canvas
+    }, passedProps, {
+      style: canvasStyles
+    }));
+  };
+
   return ConfettiReactInternal;
-}(Component); // eslint-disable-next-line react/display-name
+}(Component);
 
+ConfettiReactInternal.defaultProps = /*#__PURE__*/_extends({}, confettiDefaults);
+ConfettiReactInternal.displayName = 'ConfettiReact'; // eslint-disable-next-line react/display-name
 
-ConfettiReactInternal.defaultProps = _objectSpread2({}, confettiDefaults);
-ConfettiReactInternal.displayName = 'ConfettiReact';
-var Index = React.forwardRef(function (props, _ref) {
-  return React.createElement(ConfettiReactInternal, _extends({
+var Index = /*#__PURE__*/React.forwardRef(function (props, _ref) {
+  return React.createElement(ConfettiReactInternal, Object.assign({
     canvasRef: ref
@@ -949,0 +513,0 @@ }, props));

dist/Confetti.d.ts

@@ -0,0 +0,0 @@ import { Rect } from './Rect';

dist/index.d.ts

@@ -0,0 +0,0 @@ import React, { CanvasHTMLAttributes } from 'react';

dist/Particle.d.ts

@@ -0,0 +0,0 @@ import { ConfettiOptions } from './Confetti';

dist/ParticleGeneratorClass.d.ts

@@ -0,0 +0,0 @@ import { ConfettiOptions } from './Confetti';

dist/Point.d.ts

@@ -0,0 +0,0 @@ export interface Point {

dist/Rect.d.ts

@@ -0,0 +0,0 @@ export interface Rect {

dist/utils.d.ts

@@ -0,0 +0,0 @@ import { Point } from './Point';

package.json

 {
   "name": "confetti-react",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "React component to draw confetti for your party.",
-  "browser": "dist/formsy-react.umd.js",
-  "main": "dist/confetti-react.min.js",
+  "main": "dist/index.js",
   "module": "dist/confetti-react.esm.js",
-  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
   "repository": {
@@ -31,18 +30,21 @@ "type": "git",
   "scripts": {
-    "build": "npm run build:clean && npm run build:types && npm run build:js",
-    "build:clean": "rm -r dist/* || true",
-    "build:js": "rollup -c",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build": "tsdx build",
     "deploy": "np",
-    "docs:build": "build-storybook -s ./.storybook/public",
-    "docs:watch": "start-storybook -p 3000",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md}\"",
-    "lint": "eslint .",
-    "prepare": "npm run lint",
-    "semantic-release": "semantic-release",
-    "test": "tsc; npm run lint",
+    "format": "tsdx lint src --fix",
+    "lint": "tsdx lint src",
+    "prepublishOnly": "tsdx build",
+    "preversion": "npm run lint",
+    "start": "tsdx watch",
+    "test": "npm run lint",
     "version": "npm run build && git add dist"
   },
+  "prettier": {
+    "printWidth": 120,
+    "proseWrap": "always",
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all"
+  },
   "peerDependencies": {
-    "react": "^16.3.0"
+    "react": "^16.3.0 || ^17.0.0"
   },
@@ -53,61 +55,10 @@ "dependencies": {
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.8.7",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/preset-typescript": "^7.8.3",
-    "@rollup/plugin-commonjs": "^11.0.2",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@storybook/addon-actions": "^5.1.10",
-    "@storybook/addon-info": "^5.1.10",
-    "@storybook/addon-knobs": "^5.1.10",
-    "@storybook/addon-links": "^5.1.10",
-    "@storybook/addon-notes": "^5.1.10",
-    "@storybook/addon-storysource": "^5.1.10",
-    "@storybook/addons": "^5.1.10",
-    "@storybook/react": "^5.1.10",
-    "@storybook/theming": "^5.3.17",
     "@types/react": "^16.9.23",
-    "@typescript-eslint/eslint-plugin": "^2.23.0",
-    "@typescript-eslint/parser": "^2.23.0",
-    "babel-loader": "^8.0.5",
-    "babelrc-rollup": "^3.0.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^2.5.0",
     "np": "^5.0.0",
     "prettier": "^1.19.1",
     "react": "^16.3.0",
-    "react-docgen-typescript-loader": "^3.0.1",
     "react-dom": "^16.3.0",
-    "react-fps-stats": "^0.1.2",
-    "react-use": "^10.5.0",
-    "rollup": "^2.0.6",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.2",
+    "tsdx": "^0.14.1",
     "typescript": "^3.3.3333"
-  },
-  "config": {
-    "commitizen": {
-      "path": "cz-conventional-changelog"
-    }
-  },
-  "release": {
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/changelog",
-      "@semantic-release/npm",
-      "@semantic-release/git",
-      "@semantic-release/github"
-    ]
   }
 }

README.md

@@ -0,4 +1,8 @@
+# This is a fork
+
+This is a fork of [react-confetti](https://github.com/alampros/react-confetti) from a time when the library was unsupported and the latest release was completely broken. It is my understanding that the original library is once again actively maintained.
+
 # confetti-react
 
-Confetti without the cleanup. [Demo](http://rkuykendall.github.io/confetti-react/)
+Confetti without the cleanup.
 
@@ -15,3 +19,3 @@ [![Build Status](https://travis-ci.org/rkuykendall/confetti-react.svg?branch=master)](https://travis-ci.org/rkuykendall/confetti-react)
 [1]: http://rkuykendall.github.com/confetti-react
-[2]: http://rkuykendall.github.io/confetti-react/confetti-demo-anim.gif 'demo gif'
+[2]: https://user-images.githubusercontent.com/796717/113315634-7d24f800-92db-11eb-9a01-4c83413a5756.png 'demo gif'
 
@@ -18,0 +22,0 @@ ## Install

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

7

decreased by-83.72%

Number of lines in readme file

89

increased by4.71%

Worsened metrics

Total package byte prevSize

147854

decreased by-43.46%

Lines of code

1089

decreased by-59.56%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes