react-confetti - npm Package Compare versions

Comparing version 2.3.0 to 2.4.0

dist/react-confetti.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
-  typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global.ReactConfetti = factory(global.React));
-}(this, (function (React) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types')) :
+  typeof define === 'function' && define.amd ? define(['react', 'prop-types'], factory) :
+  (global = global || self, global.ReactConfetti = factory(global.React, global.PropTypes));
+}(this, function (React, PropTypes) { 'use strict';
 
   React = React && React.hasOwnProperty('default') ? React['default'] : React;
+  PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
 
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  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() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
+  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) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+
+    var key, i;
+
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+
+    return target;
+  }
+
+  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 degreesToRads(degrees) {
     return degrees / (180 * Math.PI);
   }
-
   function randomRange(min, max) {
     return min + Math.random() * (max - min);
   }
-
   function randomInt(min, max) {
@@ -22,5 +159,6 @@ return Math.floor(min + Math.random() * (max - min + 1));
   /**
-   * Most of this was coppied directly from the pen at http://codepen.io/Gthibaud/pen/BoaBZK
+   * Most of this was copied directly from the pen at http://codepen.io/Gthibaud/pen/BoaBZK
    * and halfheartedly converted to es6.
    */
+
   function confetti(canvas) {
@@ -52,12 +190,8 @@ var numberOfPieces = 200;
         this.type = randomInt(0, 1);
-
         this.w = randomRange(5, 20);
         this.h = randomRange(5, 20);
-
         this.r = randomRange(5, 10);
-
         this.angle = degreesToRads(randomRange(0, 360));
         this.anglespin = randomRange(-0.2, 0.2);
         this.color = colors[Math.floor(Math.random() * colors.length)];
-
         this.rotateY = randomRange(0, 1);
@@ -74,2 +208,3 @@ }
         this.radius -= 0.02;
+
         if (this.rotateY < 1) {
@@ -80,2 +215,3 @@ this.rotateY += 0.1;
         }
+
         this.angle += this.anglespin;
@@ -93,2 +229,3 @@ context.save();
         context.lineWidth = 2;
+
         if (this.type === 0) {
@@ -100,2 +237,3 @@ context.beginPath();
           context.beginPath();
+
           for (var i = 0; i < 22; i++) {
@@ -107,2 +245,3 @@ var angle = 0.5 * i;
           }
+
           context.stroke();
@@ -112,2 +251,3 @@ } else if (this.type === 1) {
         }
+
         context.closePath();
@@ -129,5 +269,7 @@ context.restore();
       }
+
       ParticleGenerator.prototype.removeParticleAt = function removeParticleAt(i) {
         this.particles.splice(i, 1);
       };
+
       ParticleGenerator.prototype.getParticle = function addParticle() {
@@ -138,2 +280,3 @@ var newParticleX = randomRange(this.x, this.w + this.x);
       };
+
       ParticleGenerator.prototype.animate = function animateParticle() {
@@ -145,4 +288,6 @@ var _this = this;
         }
+
         var nP = this.particles.length;
         var limit = this.recycle ? nP : this.particlesGenerated;
+
         if (limit < this.number) {
@@ -155,2 +300,3 @@ this.particles.push(this.getParticle());
           p.update();
+
           if (p.y > canvas.height || p.y < -100 || p.x > canvas.width + 100 || p.x < -100) {
@@ -172,7 +318,8 @@ if (recycle && limit <= _this.number) {
         if (run) {
-          self.particleGenerator.number = numberOfPieces;
-          // context.globalAlpha=.5;
+          self.particleGenerator.number = numberOfPieces; // context.globalAlpha=.5;
+
           context.fillStyle = 'white';
           context.clearRect(0, 0, canvas.width, canvas.height);
         }
+
         if (self.particleGenerator.animate()) {
@@ -186,3 +333,2 @@ requestAnimationFrame(self.update);
       self.update();
-
       return self;
@@ -192,3 +338,3 @@ }
     self.numberOfPieces = function () {
-      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -200,2 +346,3 @@ }
       }
+
       numberOfPieces = args[0];
@@ -206,2 +353,3 @@
       }
+
       return self;
@@ -211,3 +359,3 @@ };
     self.friction = function () {
-      for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
@@ -219,4 +367,4 @@ }
       }
+
       friction = args[0];
-
       return self;
@@ -226,3 +374,3 @@ };
     self.wind = function () {
-      for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
         args[_key3] = arguments[_key3];
@@ -234,4 +382,4 @@ }
       }
+
       wind = args[0];
-
       return self;
@@ -241,3 +389,3 @@ };
     self.gravity = function () {
-      for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
         args[_key4] = arguments[_key4];
@@ -249,4 +397,4 @@ }
       }
+
       gravity = args[0];
-
       return self;
@@ -256,3 +404,3 @@ };
     self.colors = function () {
-      for (var _len5 = arguments.length, args = Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+      for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
         args[_key5] = arguments[_key5];
@@ -264,4 +412,4 @@ }
       }
+
       colors = args[0];
-
       return self;
@@ -271,3 +419,3 @@ };
     self.opacity = function () {
-      for (var _len6 = arguments.length, args = Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+      for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
         args[_key6] = arguments[_key6];
@@ -279,4 +427,4 @@ }
       }
+
       opacity = args[0];
-
       return self;
@@ -286,3 +434,3 @@ };
     self.recycle = function () {
-      for (var _len7 = arguments.length, args = Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+      for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
         args[_key7] = arguments[_key7];
@@ -294,2 +442,3 @@ }
       }
+
       recycle = args[0];
@@ -300,2 +449,3 @@
       }
+
       return self;
@@ -308,2 +458,3 @@ };
       }
+
       confettiSource = Object.assign(confettiSource, arguments.length <= 0 ? undefined : arguments[0]);
@@ -314,3 +465,3 @@ return self;
     self.run = function () {
-      for (var _len8 = arguments.length, args = Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+      for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
         args[_key8] = arguments[_key8];
@@ -322,9 +473,11 @@ }
       }
+
       var wasRunning = run;
       var isRunning = args[0];
+      run = isRunning;
 
-      run = isRunning;
       if (!wasRunning && run) {
         self.update();
       }
+
       return self;
@@ -336,15 +489,5 @@ };
 
-  var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-  function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-  var ReactConfetti = function (_React$PureComponent) {
+  var ReactConfetti =
+  /*#__PURE__*/
+  function (_React$PureComponent) {
     _inherits(ReactConfetti, _React$PureComponent);
@@ -355,12 +498,22 @@
 
-      return _possibleConstructorReturn(this, (ReactConfetti.__proto__ || Object.getPrototypeOf(ReactConfetti)).apply(this, arguments));
+      return _possibleConstructorReturn(this, _getPrototypeOf(ReactConfetti).apply(this, arguments));
     }
 
     _createClass(ReactConfetti, [{
-      key: 'componentDidMount',
+      key: "componentDidMount",
       value: function componentDidMount() {
-        this.confetti = confetti(this.canvas).numberOfPieces(this.props.numberOfPieces).confettiSource(this.props.confettiSource).friction(this.props.friction).wind(this.props.wind).gravity(this.props.gravity).colors(this.props.colors).opacity(this.props.opacity).recycle(this.props.recycle).run(this.props.run)();
+        var _this$props = this.props,
+            numberOfPieces = _this$props.numberOfPieces,
+            confettiSource = _this$props.confettiSource,
+            friction = _this$props.friction,
+            wind = _this$props.wind,
+            gravity = _this$props.gravity,
+            colors = _this$props.colors,
+            opacity = _this$props.opacity,
+            recycle = _this$props.recycle,
+            run = _this$props.run;
+        this.confetti = confetti(this.canvas).numberOfPieces(numberOfPieces).confettiSource(confettiSource).friction(friction).wind(wind).gravity(gravity).colors(colors).opacity(opacity).recycle(recycle).run(run)();
       }
     }, {
-      key: 'componentWillReceiveProps',
+      key: "componentWillReceiveProps",
       value: function componentWillReceiveProps(nextProps) {
@@ -370,20 +523,20 @@ this.confetti.numberOfPieces(nextProps.numberOfPieces).confettiSource(nextProps.confettiSource).friction(nextProps.friction).wind(nextProps.wind).gravity(nextProps.gravity).colors(nextProps.colors).opacity(nextProps.opacity).recycle(nextProps.recycle).run(nextProps.run);
     }, {
-      key: 'render',
+      key: "render",
       value: function render() {
-        var _this2 = this;
+        var _this = this;
 
-        var _props = this.props,
-            width = _props.width,
-            height = _props.height,
-            style = _props.style,
-            numberOfPieces = _props.numberOfPieces,
-            friction = _props.friction,
-            wind = _props.wind,
-            gravity = _props.gravity,
-            colors = _props.colors,
-            opacity = _props.opacity,
-            recycle = _props.recycle,
-            confettiSource = _props.confettiSource,
-            run = _props.run,
-            passedProps = _objectWithoutProperties(_props, ['width', 'height', 'style', 'numberOfPieces', 'friction', 'wind', 'gravity', 'colors', 'opacity', 'recycle', 'confettiSource', 'run']);
+        var _this$props2 = this.props,
+            width = _this$props2.width,
+            height = _this$props2.height,
+            style = _this$props2.style,
+            numberOfPieces = _this$props2.numberOfPieces,
+            friction = _this$props2.friction,
+            wind = _this$props2.wind,
+            gravity = _this$props2.gravity,
+            colors = _this$props2.colors,
+            opacity = _this$props2.opacity,
+            recycle = _this$props2.recycle,
+            confettiSource = _this$props2.confettiSource,
+            run = _this$props2.run,
+            passedProps = _objectWithoutProperties(_this$props2, ["width", "height", "style", "numberOfPieces", "friction", "wind", "gravity", "colors", "opacity", "recycle", "confettiSource", "run"]);
 
@@ -399,8 +552,7 @@ var canvasStyles = Object.assign({}, {
         }, style);
-
-        return React.createElement('canvas', _extends({
+        return React.createElement("canvas", _extends({
           width: width,
           height: height,
           ref: function ref(c) {
-            _this2.canvas = c;
+            _this.canvas = c;
           },
@@ -415,3 +567,25 @@ style: canvasStyles
 
-  ReactConfetti.defaultProps = {
+  _defineProperty(ReactConfetti, "propTypes", {
+    style: PropTypes.object,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    numberOfPieces: PropTypes.number,
+    confettiSource: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+      w: PropTypes.number,
+      h: PropTypes.number
+    }),
+    friction: PropTypes.number,
+    wind: PropTypes.number,
+    gravity: PropTypes.number,
+    colors: PropTypes.arrayOf(PropTypes.string),
+    opacity: PropTypes.number,
+    recycle: PropTypes.bool,
+    run: PropTypes.bool
+  });
+
+  _defineProperty(ReactConfetti, "defaultProps", {
+    width: typeof window !== 'undefined' ? window.innerWidth : 300,
+    height: typeof window !== 'undefined' ? window.innerHeight : 200,
     numberOfPieces: 200,
@@ -426,7 +600,7 @@ confettiSource: {},
     run: true
-  };
+  });
 
   return ReactConfetti;
 
-})));
+}));
 //# sourceMappingURL=react-confetti.js.map

dist/react-confetti.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.ReactConfetti=e(t.React)}(this,function(t){"use strict";function e(t,e){return t+Math.random()*(e-t)}function r(t){var r=200,i={x:0,y:0,w:t.width,h:0},n=.99,o=0,a=.1,c=["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFEB3B","#FFC107","#FF9800","#FF5722","#795548"],s=1,h=!0,l=!0;function u(){var f=t.getContext("2d");function p(t,r){var i,n;this.radius=e(.1,1),this.x=t,this.y=r,this.vx=e(-4,4),this.vy=e(-10,-0),this.type=(i=0,n=1,Math.floor(i+Math.random()*(n-i+1))),this.w=e(5,20),this.h=e(5,20),this.r=e(5,10),this.angle=e(0,360)/(180*Math.PI),this.anglespin=e(-.2,.2),this.color=c[Math.floor(Math.random()*c.length)],this.rotateY=e(0,1)}function y(t,e,r){this.x=t.x,this.y=t.y,this.w=t.w,this.h=t.h,this.number=e,this.particles=[],this.particlesGenerated=0,this.text=r,this.recycle=h}return p.prototype.update=function(){if(this.x+=this.vx,this.y+=this.vy,this.vy+=a,this.vx+=o,this.vx*=n,this.vy*=n,this.radius-=.02,this.rotateY<1?this.rotateY+=.1:this.rotateY=-1,this.angle+=this.anglespin,f.save(),f.translate(this.x,this.y),f.rotate(this.angle),f.scale(1,this.rotateY),f.rotate(this.angle),f.beginPath(),f.fillStyle=this.color,f.strokeStyle=this.color,f.globalAlpha=s,f.lineCap="round",f.lineWidth=2,0===this.type)f.beginPath(),f.arc(0,0,this.r,0,2*Math.PI),f.fill();else if(2===this.type){f.beginPath();for(var t=0;t<22;t++){var e=.5*t,r=(.2+1.5*e)*Math.cos(e),i=(.2+1.5*e)*Math.sin(e);f.lineTo(r,i)}f.stroke()}else 1===this.type&&f.fillRect(-this.w/2,-this.h/2,this.w,this.h);f.closePath(),f.restore()},y.prototype.removeParticleAt=function(t){this.particles.splice(t,1)},y.prototype.getParticle=function(){return new p(e(this.x,this.w+this.x),e(this.y,this.h+this.y),this.text)},y.prototype.animate=function(){var e=this;if(!l)return!1;var r=this.particles.length,i=this.recycle?r:this.particlesGenerated;return i<this.number&&(this.particles.push(this.getParticle()),this.particlesGenerated+=1),this.particles.forEach(function(r,n){r.update(),(r.y>t.height||r.y<-100||r.x>t.width+100||r.x<-100)&&(h&&i<=e.number?e.particles[n]=e.getParticle():e.removeParticleAt(n))}),r>0||i<this.number},u.particleGenerator=new y(i,r),u.update=function(){l&&(u.particleGenerator.number=r,f.fillStyle="white",f.clearRect(0,0,t.width,t.height)),u.particleGenerator.animate()?requestAnimationFrame(u.update):l=!1},u.update(),u}return u.numberOfPieces=function(){for(var t=arguments.length,e=Array(t),i=0;i<t;i++)e[i]=arguments[i];return e.length?(r=e[0],u.particleGenerator&&(u.particleGenerator.number=r),u):r},u.friction=function(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(n=e[0],u):n},u.wind=function(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(o=e[0],u):o},u.gravity=function(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(a=e[0],u):a},u.colors=function(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(c=e[0],u):c},u.opacity=function(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(s=e[0],u):s},u.recycle=function(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(h=e[0],u.particleGenerator&&(u.particleGenerator.recycle=h),u):h},u.confettiSource=function(){return arguments.length?(i=Object.assign(i,arguments.length<=0?void 0:arguments[0]),u):i},u.run=function(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];if(!e.length)return l;var i=l,n=e[0];return l=n,!i&&l&&u.update(),u},u}t=t&&t.hasOwnProperty("default")?t.default:t;var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(t[i]=r[i])}return t},n=function(){function t(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,r,i){return r&&t(e.prototype,r),i&&t(e,i),e}}();var o=function(e){function o(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,o),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(o.__proto__||Object.getPrototypeOf(o)).apply(this,arguments))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(o,t.PureComponent),n(o,[{key:"componentDidMount",value:function(){this.confetti=r(this.canvas).numberOfPieces(this.props.numberOfPieces).confettiSource(this.props.confettiSource).friction(this.props.friction).wind(this.props.wind).gravity(this.props.gravity).colors(this.props.colors).opacity(this.props.opacity).recycle(this.props.recycle).run(this.props.run)()}},{key:"componentWillReceiveProps",value:function(t){this.confetti.numberOfPieces(t.numberOfPieces).confettiSource(t.confettiSource).friction(t.friction).wind(t.wind).gravity(t.gravity).colors(t.colors).opacity(t.opacity).recycle(t.recycle).run(t.run)}},{key:"render",value:function(){var e=this,r=this.props,n=r.width,o=r.height,a=r.style,c=(r.numberOfPieces,r.friction,r.wind,r.gravity,r.colors,r.opacity,r.recycle,r.confettiSource,r.run,function(t,e){var r={};for(var i in t)e.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(t,i)&&(r[i]=t[i]);return r}(r,["width","height","style","numberOfPieces","friction","wind","gravity","colors","opacity","recycle","confettiSource","run"])),s=Object.assign({},{zIndex:2,position:"absolute",top:0,left:0,pointerEvents:"none",WebkitPointerEvents:"none",MozPointerEvents:"none"},a);return t.createElement("canvas",i({width:n,height:o,ref:function(t){e.canvas=t},style:s},c))}}]),o}();return o.defaultProps={numberOfPieces:200,confettiSource:{},friction:.99,wind:0,gravity:.1,colors:["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFEB3B","#FFC107","#FF9800","#FF5722","#795548"],opacity:1,recycle:!0,run:!0},o});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):(t=t||self).ReactConfetti=e(t.React,t.PropTypes)}(this,function(a,t){"use strict";function o(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function s(){return(s=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}function c(t){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function u(t,e){return(u=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function h(t,e){if(null==t)return{};var r,n,i=function(t,e){if(null==t)return{};var r,n,i={},o=Object.keys(t);for(n=0;n<o.length;n++)r=o[n],0<=e.indexOf(r)||(i[r]=t[r]);return i}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(n=0;n<o.length;n++)r=o[n],0<=e.indexOf(r)||Object.prototype.propertyIsEnumerable.call(t,r)&&(i[r]=t[r])}return i}function l(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function y(t,e){return t+Math.random()*(e-t)}function f(o){var n=200,r={x:0,y:0,w:o.width,h:0},c=.99,a=0,s=.1,u=["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFEB3B","#FFC107","#FF9800","#FF5722","#795548"],h=1,l=!0,f=!0;function p(){var i=o.getContext("2d");function t(t,e){var r,n;this.radius=y(.1,1),this.x=t,this.y=e,this.vx=y(-4,4),this.vy=y(-10,-0),this.type=(r=0,n=1,Math.floor(r+Math.random()*(n-r+1))),this.w=y(5,20),this.h=y(5,20),this.r=y(5,10),this.angle=y(0,360)/(180*Math.PI),this.anglespin=y(-.2,.2),this.color=u[Math.floor(Math.random()*u.length)],this.rotateY=y(0,1)}function e(t,e,r){this.x=t.x,this.y=t.y,this.w=t.w,this.h=t.h,this.number=e,this.particles=[],this.particlesGenerated=0,this.text=r,this.recycle=l}return t.prototype.update=function(){if(this.x+=this.vx,this.y+=this.vy,this.vy+=s,this.vx+=a,this.vx*=c,this.vy*=c,this.radius-=.02,this.rotateY<1?this.rotateY+=.1:this.rotateY=-1,this.angle+=this.anglespin,i.save(),i.translate(this.x,this.y),i.rotate(this.angle),i.scale(1,this.rotateY),i.rotate(this.angle),i.beginPath(),i.fillStyle=this.color,i.strokeStyle=this.color,i.globalAlpha=h,i.lineCap="round",i.lineWidth=2,0===this.type)i.beginPath(),i.arc(0,0,this.r,0,2*Math.PI),i.fill();else if(2===this.type){i.beginPath();for(var t=0;t<22;t++){var e=.5*t,r=(.2+1.5*e)*Math.cos(e),n=(.2+1.5*e)*Math.sin(e);i.lineTo(r,n)}i.stroke()}else 1===this.type&&i.fillRect(-this.w/2,-this.h/2,this.w,this.h);i.closePath(),i.restore()},e.prototype.removeParticleAt=function(t){this.particles.splice(t,1)},e.prototype.getParticle=function(){return new t(y(this.x,this.w+this.x),y(this.y,this.h+this.y),this.text)},e.prototype.animate=function(){var r=this;if(!f)return!1;var t=this.particles.length,n=this.recycle?t:this.particlesGenerated;return n<this.number&&(this.particles.push(this.getParticle()),this.particlesGenerated+=1),this.particles.forEach(function(t,e){t.update(),(t.y>o.height||t.y<-100||t.x>o.width+100||t.x<-100)&&(l&&n<=r.number?r.particles[e]=r.getParticle():r.removeParticleAt(e))}),0<t||n<this.number},p.particleGenerator=new e(r,n),p.update=function(){f&&(p.particleGenerator.number=n,i.fillStyle="white",i.clearRect(0,0,o.width,o.height)),p.particleGenerator.animate()?requestAnimationFrame(p.update):f=!1},p.update(),p}return p.numberOfPieces=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(n=e[0],p.particleGenerator&&(p.particleGenerator.number=n),p):n},p.friction=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(c=e[0],p):c},p.wind=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(a=e[0],p):a},p.gravity=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(s=e[0],p):s},p.colors=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(u=e[0],p):u},p.opacity=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(h=e[0],p):h},p.recycle=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return e.length?(l=e[0],p.particleGenerator&&(p.particleGenerator.recycle=l),p):l},p.confettiSource=function(){return arguments.length?(r=Object.assign(r,arguments.length<=0?void 0:arguments[0]),p):r},p.run=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];if(!e.length)return f;var n=f,i=e[0];return f=i,!n&&f&&p.update(),p},p}a=a&&a.hasOwnProperty("default")?a.default:a,t=t&&t.hasOwnProperty("default")?t.default:t;var r=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),l(this,c(e).apply(this,arguments))}var r,n,i;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)}(e,a.PureComponent),r=e,(n=[{key:"componentDidMount",value:function(){var t=this.props,e=t.numberOfPieces,r=t.confettiSource,n=t.friction,i=t.wind,o=t.gravity,c=t.colors,a=t.opacity,s=t.recycle,u=t.run;this.confetti=f(this.canvas).numberOfPieces(e).confettiSource(r).friction(n).wind(i).gravity(o).colors(c).opacity(a).recycle(s).run(u)()}},{key:"componentWillReceiveProps",value:function(t){this.confetti.numberOfPieces(t.numberOfPieces).confettiSource(t.confettiSource).friction(t.friction).wind(t.wind).gravity(t.gravity).colors(t.colors).opacity(t.opacity).recycle(t.recycle).run(t.run)}},{key:"render",value:function(){var e=this,t=this.props,r=t.width,n=t.height,i=t.style,o=(t.numberOfPieces,t.friction,t.wind,t.gravity,t.colors,t.opacity,t.recycle,t.confettiSource,t.run,h(t,["width","height","style","numberOfPieces","friction","wind","gravity","colors","opacity","recycle","confettiSource","run"])),c=Object.assign({},{zIndex:2,position:"absolute",top:0,left:0,pointerEvents:"none",WebkitPointerEvents:"none",MozPointerEvents:"none"},i);return a.createElement("canvas",s({width:r,height:n,ref:function(t){e.canvas=t},style:c},o))}}])&&o(r.prototype,n),i&&o(r,i),e}();return e(r,"propTypes",{style:t.object,width:t.number,height:t.number,numberOfPieces:t.number,confettiSource:t.shape({x:t.number,y:t.number,w:t.number,h:t.number}),friction:t.number,wind:t.number,gravity:t.number,colors:t.arrayOf(t.string),opacity:t.number,recycle:t.bool,run:t.bool}),e(r,"defaultProps",{width:"undefined"!=typeof window?window.innerWidth:300,height:"undefined"!=typeof window?window.innerHeight:200,numberOfPieces:200,confettiSource:{},friction:.99,wind:0,gravity:.1,colors:["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4CAF50","#8BC34A","#CDDC39","#FFEB3B","#FFC107","#FF9800","#FF5722","#795548"],opacity:1,recycle:!0,run:!0}),r});
 //# sourceMappingURL=react-confetti.min.js.map

package.json

 {
   "name": "react-confetti",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React component to draw confetti for your party.",
@@ -33,6 +33,5 @@ "main": "index.js",
     "cleanall": "git clean -xfd .",
-    "lint": "eslint src/ www/src/ --ext .js",
+    "lint": "eslint . --ext .js",
     "prepare": "yarn run clean && yarn run lint && yarn run build",
     "semantic-release": "semantic-release",
-    "travis-deploy-once": "travis-deploy-once",
     "commit": "git-cz"
@@ -45,28 +44,23 @@ },
   "devDependencies": {
-    "babel-cli": "^6.7.5",
-    "babel-core": "^6.21.0",
-    "babel-eslint": "^8.2.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.4",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-register": "^6.18.0",
-    "commitizen": "^2.9.6",
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "commitizen": "^3.0.7",
     "cz-conventional-changelog": "^2.1.0",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-config-vectron": "^1.0.1",
+    "eslint": "^5.14.1",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-vectron": "^2.1.0",
     "eslint-plugin-import": "^2.11.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-sorting": "^0.3.0",
+    "eslint-plugin-sorting": "^0.4.1",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-uglify": "^3.0.0",
-    "semantic-release": "^15.1.7",
-    "travis-deploy-once": "^5.0.0"
+    "rollup": "^1.3.1",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-uglify": "^6.0.2",
+    "semantic-release": "^15.1.7"
   },
@@ -78,19 +72,2 @@ "eslintConfig": {
   },
-  "babel": {
-    "presets": [
-      [
-        "env",
-        {
-          "modules": false
-        }
-      ],
-      "react",
-      "stage-0"
-    ],
-    "plugins": [
-      "transform-class-properties",
-      "transform-react-remove-prop-types",
-      "transform-object-rest-spread"
-    ]
-  },
   "config": {
@@ -97,0 +74,0 @@ "commitizen": {

README.md

@@ -20,3 +20,3 @@ # react-confetti
 ```sh
-npm i -S react-confetti
+npm install react-confetti
 ```
@@ -26,31 +26,19 @@
 
-`width` and `height` props are required. Here, they are provided by [react-sizeme](https://github.com/ctrlplusb/react-sizeme):
+`width` and `height` props are recommended. They will default to the initial window dimensions, but will not respond to resize events. It is recommended to provide the dimensions yourself. Here is an example using [a hook](https://github.com/streamich/react-use/blob/master/docs/useWindowSize.md):
 
 ```jsx
-import PropTypes from 'prop-types'
 import React from 'react'
-import ReactDOM from 'react-dom'
-import sizeMe from 'react-sizeme'
-import Confetti from './react-confetti'
+import { useWindowSize } from 'react-use'
+import Confetti from 'react-confetti'
 
-const DimensionedExample = sizeMe({
-  monitorHeight: true,
-  monitorWidth: true,
-})(class Example extends React.PureComponent {
-  static propTypes = {
-    size: PropTypes.shape({
-      width: PropTypes.number,
-      height: PropTypes.number,
-    }),
-  }
-  render() {
-    return (
-      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
-        <Confetti {...this.props.size} />
-      </div>
-    )
-  }
-})
+export default () => {
+  const { width, height } = useWindowSize()
+  return (
+    <Confetti
+      width={width}
+      height={height}
+    />
+  )
+}
 
-ReactDOM.render(<DimensionedExample />, document.getElementById('app'))
 ```
@@ -62,4 +50,4 @@
 | ---------------- | ---------------------                            | ---                                                                                                                                                                                                                                                                                | ---                                                                   |
-| `width`          | `Number`                                         | `'100%'`                                                                                                                                                                                                                                                                           | Width of the `<canvas>` element.                                      |
-| `height`         | `Number`                                         | `'100%'`                                                                                                                                                                                                                                                                           | Height of the `<canvas>` element.                                     |
+| `width`          | `Number`                                         | `window.innerWidth \|\| 300`                                                                                                                                                                                                                                                       | Width of the `<canvas>` element.                                      |
+| `height`         | `Number`                                         | `window.innerHeight \|\| 200`                                                                                                                                                                                                                                                      | Height of the `<canvas>` element.                                     |
 | `numberOfPieces` | `Number`                                         | 200                                                                                                                                                                                                                                                                                | Number of confetti pieces at one time.                                |
@@ -66,0 +54,0 @@ | `confettiSource` | `{ x: Number, y: Number, w: Number, h: Number }` | `{x: 0, y: 0, w: canvas.width, h:0}`                                                                                                                                                                                                                                               | Rectangle where the confetti should spawn. Default is across the top. |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75692

increased by11.2%

Dev dependency count

21

decreased by-19.23%

Lines of code

501

increased by38.02%

Worsened metrics

Number of lines in readme file

59

decreased by-16.9%

No dependency changes