react-confetti - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [2.6.0](https://github.com/alampros/react-confetti/compare/v2.5.0...v2.6.0) (2019-03-10)
+
+
+### Features
+
+* Add prop to draw custom confetti ([992376b](https://github.com/alampros/react-confetti/commit/992376b))
+
 # [2.5.0](https://github.com/alampros/react-confetti/compare/v2.4.1...v2.5.0) (2019-03-08)
@@ -2,0 +9,0 @@

dist/react-confetti.js

@@ -451,3 +451,3 @@ (function (global, factory) {
     ParticleShape[ParticleShape["Square"] = 1] = "Square";
-    ParticleShape[ParticleShape["Spiral"] = 2] = "Spiral";
+    ParticleShape[ParticleShape["Strip"] = 2] = "Strip";
   })(ParticleShape || (ParticleShape = {}));
@@ -516,3 +516,4 @@
             friction = _this$getOptions2.friction,
-            opacity = _this$getOptions2.opacity;
+            opacity = _this$getOptions2.opacity,
+            drawShape = _this$getOptions2.drawShape;
 
@@ -545,31 +546,26 @@ this.x += this.vx;
 
-        switch (this.shape) {
-          case ParticleShape.Cirlce:
-            {
-              this.context.beginPath();
-              this.context.arc(0, 0, this.radius, 0, 2 * Math.PI);
-              this.context.fill();
-              break;
-            }
+        if (drawShape && typeof drawShape === 'function') {
+          drawShape.call(this, this.context);
+        } else {
+          switch (this.shape) {
+            case ParticleShape.Cirlce:
+              {
+                this.context.beginPath();
+                this.context.arc(0, 0, this.radius, 0, 2 * Math.PI);
+                this.context.fill();
+                break;
+              }
 
-          case ParticleShape.Square:
-            {
-              this.context.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
-              break;
-            }
+            case ParticleShape.Square:
+              {
+                this.context.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
+                break;
+              }
 
-          case ParticleShape.Spiral:
-            {
-              this.context.beginPath();
-
-              for (var i = 0; i < 22; i++) {
-                var angle = 0.35 * i;
-                var x = (0.2 + 1.5 * angle) * Math.cos(angle);
-                var y = (0.2 + 1.5 * angle) * Math.sin(angle);
-                this.context.lineTo(x, y);
+            case ParticleShape.Strip:
+              {
+                this.context.fillRect(-this.w / 6, -this.h / 2, this.w / 3, this.h);
+                break;
               }
-
-              this.context.stroke();
-              break;
-            }
+          }
         }
@@ -878,3 +874,3 @@
     var rest = {};
-    var confettiOptionKeys = [].concat(_toConsumableArray(Object.keys(confettiDefaults)), ['confettiSource']);
+    var confettiOptionKeys = [].concat(_toConsumableArray(Object.keys(confettiDefaults)), ['confettiSource', 'drawShape']);
 
@@ -881,0 +877,0 @@ for (var prop in props) {

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=t||self).ReactConfetti=e(t.React)}(this,function(c){"use strict";function u(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function h(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(t){h(e,t,n[t])})}return e}function f(t){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function a(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,r=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);i=!0);}catch(t){r=!0,o=t}finally{try{i||null==s.return||s.return()}finally{if(r)throw o}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function s(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}c=c&&c.hasOwnProperty("default")?c.default:c;var p,t,v={linear:function(t,e,n,i){return(n-e)*t/i+e},easeInQuad:function(t,e,n,i){return(n-e)*(t/=i)*t+e},easeOutQuad:function(t,e,n,i){return-(n-e)*(t/=i)*(t-2)+e},easeInOutQuad:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?r/2*t*t+e:-r/2*(--t*(t-2)-1)+e},easeInCubic:function(t,e,n,i){return(n-e)*(t/=i)*t*t+e},easeOutCubic:function(t,e,n,i){return(n-e)*((t=t/i-1)*t*t+1)+e},easeInOutCubic:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?r/2*t*t*t+e:r/2*((t-=2)*t*t+2)+e},easeInQuart:function(t,e,n,i){return(n-e)*(t/=i)*t*t*t+e},easeOutQuart:function(t,e,n,i){return-(n-e)*((t=t/i-1)*t*t*t-1)+e},easeInOutQuart:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?r/2*t*t*t*t+e:-r/2*((t-=2)*t*t*t-2)+e},easeInQuint:function(t,e,n,i){return(n-e)*(t/=i)*t*t*t*t+e},easeOutQuint:function(t,e,n,i){return(n-e)*((t=t/i-1)*t*t*t*t+1)+e},easeInOutQuint:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?r/2*t*t*t*t*t+e:r/2*((t-=2)*t*t*t*t+2)+e},easeInSine:function(t,e,n,i){var r=n-e;return-r*Math.cos(t/i*(Math.PI/2))+r+e},easeOutSine:function(t,e,n,i){return(n-e)*Math.sin(t/i*(Math.PI/2))+e},easeInOutSine:function(t,e,n,i){return-(n-e)/2*(Math.cos(Math.PI*t/i)-1)+e},easeInExpo:function(t,e,n,i){return 0==t?e:(n-e)*Math.pow(2,10*(t/i-1))+e},easeOutExpo:function(t,e,n,i){var r=n-e;return t==i?e+r:r*(1-Math.pow(2,-10*t/i))+e},easeInOutExpo:function(t,e,n,i){var r=n-e;return 0===t?e:t===i?e+r:(t/=i/2)<1?r/2*Math.pow(2,10*(t-1))+e:r/2*(2-Math.pow(2,-10*--t))+e},easeInCirc:function(t,e,n,i){return-(n-e)*(Math.sqrt(1-(t/=i)*t)-1)+e},easeOutCirc:function(t,e,n,i){return(n-e)*Math.sqrt(1-(t=t/i-1)*t)+e},easeInOutCirc:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?-r/2*(Math.sqrt(1-t*t)-1)+e:r/2*(Math.sqrt(1-(t-=2)*t)+1)+e},easeInElastic:function(t,e,n,i){var r,o,a,s=n-e;return a=1.70158,r=s,(o=0)===t?e:1==(t/=i)?e+s:(o||(o=.3*i),a=r<Math.abs(s)?(r=s,o/4):o/(2*Math.PI)*Math.asin(s/r),-r*Math.pow(2,10*(t-=1))*Math.sin((t*i-a)*(2*Math.PI)/o)+e)},easeOutElastic:function(t,e,n,i){var r,o,a,s=n-e;return a=1.70158,r=s,(o=0)===t?e:1==(t/=i)?e+s:(o||(o=.3*i),a=r<Math.abs(s)?(r=s,o/4):o/(2*Math.PI)*Math.asin(s/r),r*Math.pow(2,-10*t)*Math.sin((t*i-a)*(2*Math.PI)/o)+s+e)},easeInOutElastic:function(t,e,n,i){var r,o,a,s=n-e;return a=1.70158,r=s,(o=0)===t?e:2==(t/=i/2)?e+s:(o||(o=i*(.3*1.5)),a=r<Math.abs(s)?(r=s,o/4):o/(2*Math.PI)*Math.asin(s/r),t<1?r*Math.pow(2,10*(t-=1))*Math.sin((t*i-a)*(2*Math.PI)/o)*-.5+e:r*Math.pow(2,-10*(t-=1))*Math.sin((t*i-a)*(2*Math.PI)/o)*.5+s+e)},easeInBack:function(t,e,n,i,r){return void 0===r&&(r=1.70158),(n-e)*(t/=i)*t*((r+1)*t-r)+e},easeOutBack:function(t,e,n,i,r){return void 0===r&&(r=1.70158),(n-e)*((t=t/i-1)*t*((r+1)*t+r)+1)+e},easeInOutBack:function(t,e,n,i,r){var o=n-e;return void 0===r&&(r=1.70158),(t/=i/2)<1?o/2*(t*t*((1+(r*=1.525))*t-r))+e:o/2*((t-=2)*t*((1+(r*=1.525))*t+r)+2)+e},easeInBounce:function(t,e,n,i){var r=n-e;return r-v.easeOutBounce(i-t,0,r,i)+e},easeOutBounce:function(t,e,n,i){var r=n-e;return(t/=i)<1/2.75?r*(7.5625*t*t)+e:t<2/2.75?r*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?r*(7.5625*(t-=2.25/2.75)*t+.9375)+e:r*(7.5625*(t-=2.625/2.75)*t+.984375)+e},easeInOutBounce:function(t,e,n,i){var r=n-e;return t<i/2?.5*v.easeInBounce(2*t,0,r,i)+e:.5*v.easeOutBounce(2*t-i,0,r,i)+.5*r+e}},d=v;function y(t,e){return t+Math.random()*(e-t)}(t=p||(p={}))[t.Cirlce=0]="Cirlce",t[t.Square=1]="Square",t[t.Spiral=2]="Spiral";var w=function(){function s(t,e,n,i){u(this,s),h(this,"context",void 0),h(this,"radius",void 0),h(this,"x",void 0),h(this,"y",void 0),h(this,"w",void 0),h(this,"h",void 0),h(this,"vx",void 0),h(this,"vy",void 0),h(this,"shape",void 0),h(this,"angle",void 0),h(this,"angularSpin",void 0),h(this,"color",void 0),h(this,"rotateY",void 0),h(this,"getOptions",void 0),this.getOptions=e;var r,o,a=this.getOptions().colors;this.context=t,this.x=n,this.y=i,this.w=y(5,20),this.h=y(5,20),this.radius=y(5,10),this.vx=y(-4,4),this.vy=y(-10,-0),this.shape=(r=0,o=2,Math.floor(r+Math.random()*(o-r+1))),this.angle=y(0,360)/(180*Math.PI),this.angularSpin=y(-.2,.2),this.color=a[Math.floor(Math.random()*a.length)],this.rotateY=y(0,1)}return e(s,[{key:"update",value:function(){var t=this.getOptions(),e=t.gravity,n=t.wind,i=t.friction,r=t.opacity;switch(this.x+=this.vx,this.y+=this.vy,this.vy+=e,this.vx+=n,this.vx*=i,this.vy*=i,this.rotateY<1?this.rotateY+=.1:this.rotateY=-1,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=r,this.context.lineCap="round",this.context.lineWidth=2,this.shape){case p.Cirlce:this.context.beginPath(),this.context.arc(0,0,this.radius,0,2*Math.PI),this.context.fill();break;case p.Square:this.context.fillRect(-this.w/2,-this.h/2,this.w,this.h);break;case p.Spiral:this.context.beginPath();for(var o=0;o<22;o++){var a=.35*o,s=(.2+1.5*a)*Math.cos(a),c=(.2+1.5*a)*Math.sin(a);this.context.lineTo(s,c)}this.context.stroke()}this.context.closePath(),this.context.restore()}}]),s}(),g=function t(e,n){var g=this;u(this,t),h(this,"canvas",void 0),h(this,"context",void 0),h(this,"getOptions",void 0),h(this,"x",0),h(this,"y",0),h(this,"w",0),h(this,"h",0),h(this,"lastNumberOfPieces",0),h(this,"tweenInitTime",Date.now()),h(this,"particles",[]),h(this,"particlesGenerated",0),h(this,"removeParticleAt",function(t){g.particles.splice(t,1)}),h(this,"getParticle",function(){var t=y(g.x,g.w+g.x),e=y(g.y,g.h+g.y);return new w(g.context,g.getOptions,t,e)}),h(this,"animate",function(){var n=g.canvas,t=g.context,e=g.particlesGenerated,i=g.lastNumberOfPieces,r=g.getOptions(),o=r.run,a=r.recycle,s=r.numberOfPieces,c=r.debug,u=r.tweenFunction,h=r.tweenDuration;if(!o)return!1;var f=g.particles.length,l=a?f:e,p=Date.now();if(l<s){i!==s&&(g.tweenInitTime=p,g.lastNumberOfPieces=s);for(var v=g.tweenInitTime,d=u(h<p-v?h:Math.max(0,p-v),l,s,h),y=Math.round(d-l),w=0;w<y;w++)g.particles.push(g.getParticle());g.particlesGenerated+=y}return c&&(t.font="12px sans-serif",t.fillStyle="#333",t.textAlign="right",t.fillText("Particles: ".concat(f),n.width-10,n.height-20)),g.particles.forEach(function(t,e){t.update(),(t.y>n.height||t.y<-100||t.x>n.width+100||t.x<-100)&&(a&&l<=s?g.particles[e]=g.getParticle():g.removeParticleAt(e))}),0<f||l<s}),this.canvas=e;var i=this.canvas.getContext("2d");if(!i)throw new Error("Could not get canvas context");this.context=i,this.getOptions=n},b={width:"undefined"!=typeof window?window.innerWidth:300,height:"undefined"!=typeof window?window.innerHeight:200,numberOfPieces:200,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,debug:!1,tweenFunction:d.easeInOutQuad,tweenDuration:5e3,recycle:!0,run:!0},O=function(){function r(t,e){var i=this;u(this,r),h(this,"canvas",void 0),h(this,"context",void 0),h(this,"_options",void 0),h(this,"generator",void 0),h(this,"setOptionsWithDefaults",function(t){var e={confettiSource:{x:0,y:0,w:i.canvas.width,h:0}};i._options=o({},e,b,t),Object.assign(i,t.confettiSource)}),h(this,"update",function(){var t=i.options.run,e=i.canvas,n=i.context;t&&(n.fillStyle="white",n.clearRect(0,0,e.width,e.height)),i.generator.animate()?requestAnimationFrame(i.update):i._options.run=!1}),this.canvas=t;var n=this.canvas.getContext("2d");if(!n)throw new Error("Could not get canvas context");this.context=n,this.generator=new g(this.canvas,function(){return i.options}),this.options=e,this.update()}return e(r,[{key:"options",get:function(){return this._options},set:function(t){var e=this._options&&this._options.run;this.setOptionsWithDefaults(t),this.generator&&Object.assign(this.generator,this.options.confettiSource),"boolean"==typeof t.run&&t.run&&!1===e&&this.update()}}]),r}(),x=function(t){function s(){var t,e,n,i;u(this,s);for(var r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];return n=this,h(l(e=!(i=(t=f(s)).call.apply(t,[this].concat(o)))||"object"!=typeof i&&"function"!=typeof i?l(n):i),"canvas",c.createRef()),h(l(e),"confetti",void 0),e}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&&n(t,e)}(s,c.Component),e(s,[{key:"componentDidMount",value:function(){if(this.canvas.current){var t=M(this.props)[0];this.confetti=new O(this.canvas.current,t)}}},{key:"componentWillReceiveProps",value:function(t){var e=M(t)[0];this.confetti&&(this.confetti.options=e)}},{key:"render",value:function(){var t=a(M(this.props),2),e=t[0],n=t[1],i=o({zIndex:2,position:"absolute",top:0,left:0,bottom:0,right:0},n.style);return c.createElement("canvas",r({width:e.width,height:e.height,ref:this.canvas},n,{style:i}))}}]),s}();function M(t){var e={},n={},i=[].concat(s(Object.keys(b)),["confettiSource"]);for(var r in t){var o=t[r];i.includes(r)?e[r]=o:n[r]=o}return[e,n]}return h(x,"defaultProps",o({},b)),x});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):(t=t||self).ReactConfetti=e(t.React)}(this,function(c){"use strict";function u(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function h(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(t){h(e,t,n[t])})}return e}function f(t){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function n(t,e){return(n=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function l(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function a(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,r=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);i=!0);}catch(t){r=!0,o=t}finally{try{i||null==s.return||s.return()}finally{if(r)throw o}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function s(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}c=c&&c.hasOwnProperty("default")?c.default:c;var p,t,v={linear:function(t,e,n,i){return(n-e)*t/i+e},easeInQuad:function(t,e,n,i){return(n-e)*(t/=i)*t+e},easeOutQuad:function(t,e,n,i){return-(n-e)*(t/=i)*(t-2)+e},easeInOutQuad:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?r/2*t*t+e:-r/2*(--t*(t-2)-1)+e},easeInCubic:function(t,e,n,i){return(n-e)*(t/=i)*t*t+e},easeOutCubic:function(t,e,n,i){return(n-e)*((t=t/i-1)*t*t+1)+e},easeInOutCubic:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?r/2*t*t*t+e:r/2*((t-=2)*t*t+2)+e},easeInQuart:function(t,e,n,i){return(n-e)*(t/=i)*t*t*t+e},easeOutQuart:function(t,e,n,i){return-(n-e)*((t=t/i-1)*t*t*t-1)+e},easeInOutQuart:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?r/2*t*t*t*t+e:-r/2*((t-=2)*t*t*t-2)+e},easeInQuint:function(t,e,n,i){return(n-e)*(t/=i)*t*t*t*t+e},easeOutQuint:function(t,e,n,i){return(n-e)*((t=t/i-1)*t*t*t*t+1)+e},easeInOutQuint:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?r/2*t*t*t*t*t+e:r/2*((t-=2)*t*t*t*t+2)+e},easeInSine:function(t,e,n,i){var r=n-e;return-r*Math.cos(t/i*(Math.PI/2))+r+e},easeOutSine:function(t,e,n,i){return(n-e)*Math.sin(t/i*(Math.PI/2))+e},easeInOutSine:function(t,e,n,i){return-(n-e)/2*(Math.cos(Math.PI*t/i)-1)+e},easeInExpo:function(t,e,n,i){return 0==t?e:(n-e)*Math.pow(2,10*(t/i-1))+e},easeOutExpo:function(t,e,n,i){var r=n-e;return t==i?e+r:r*(1-Math.pow(2,-10*t/i))+e},easeInOutExpo:function(t,e,n,i){var r=n-e;return 0===t?e:t===i?e+r:(t/=i/2)<1?r/2*Math.pow(2,10*(t-1))+e:r/2*(2-Math.pow(2,-10*--t))+e},easeInCirc:function(t,e,n,i){return-(n-e)*(Math.sqrt(1-(t/=i)*t)-1)+e},easeOutCirc:function(t,e,n,i){return(n-e)*Math.sqrt(1-(t=t/i-1)*t)+e},easeInOutCirc:function(t,e,n,i){var r=n-e;return(t/=i/2)<1?-r/2*(Math.sqrt(1-t*t)-1)+e:r/2*(Math.sqrt(1-(t-=2)*t)+1)+e},easeInElastic:function(t,e,n,i){var r,o,a,s=n-e;return a=1.70158,r=s,(o=0)===t?e:1==(t/=i)?e+s:(o||(o=.3*i),a=r<Math.abs(s)?(r=s,o/4):o/(2*Math.PI)*Math.asin(s/r),-r*Math.pow(2,10*(t-=1))*Math.sin((t*i-a)*(2*Math.PI)/o)+e)},easeOutElastic:function(t,e,n,i){var r,o,a,s=n-e;return a=1.70158,r=s,(o=0)===t?e:1==(t/=i)?e+s:(o||(o=.3*i),a=r<Math.abs(s)?(r=s,o/4):o/(2*Math.PI)*Math.asin(s/r),r*Math.pow(2,-10*t)*Math.sin((t*i-a)*(2*Math.PI)/o)+s+e)},easeInOutElastic:function(t,e,n,i){var r,o,a,s=n-e;return a=1.70158,r=s,(o=0)===t?e:2==(t/=i/2)?e+s:(o||(o=i*(.3*1.5)),a=r<Math.abs(s)?(r=s,o/4):o/(2*Math.PI)*Math.asin(s/r),t<1?r*Math.pow(2,10*(t-=1))*Math.sin((t*i-a)*(2*Math.PI)/o)*-.5+e:r*Math.pow(2,-10*(t-=1))*Math.sin((t*i-a)*(2*Math.PI)/o)*.5+s+e)},easeInBack:function(t,e,n,i,r){return void 0===r&&(r=1.70158),(n-e)*(t/=i)*t*((r+1)*t-r)+e},easeOutBack:function(t,e,n,i,r){return void 0===r&&(r=1.70158),(n-e)*((t=t/i-1)*t*((r+1)*t+r)+1)+e},easeInOutBack:function(t,e,n,i,r){var o=n-e;return void 0===r&&(r=1.70158),(t/=i/2)<1?o/2*(t*t*((1+(r*=1.525))*t-r))+e:o/2*((t-=2)*t*((1+(r*=1.525))*t+r)+2)+e},easeInBounce:function(t,e,n,i){var r=n-e;return r-v.easeOutBounce(i-t,0,r,i)+e},easeOutBounce:function(t,e,n,i){var r=n-e;return(t/=i)<1/2.75?r*(7.5625*t*t)+e:t<2/2.75?r*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?r*(7.5625*(t-=2.25/2.75)*t+.9375)+e:r*(7.5625*(t-=2.625/2.75)*t+.984375)+e},easeInOutBounce:function(t,e,n,i){var r=n-e;return t<i/2?.5*v.easeInBounce(2*t,0,r,i)+e:.5*v.easeOutBounce(2*t-i,0,r,i)+.5*r+e}},d=v;function y(t,e){return t+Math.random()*(e-t)}(t=p||(p={}))[t.Cirlce=0]="Cirlce",t[t.Square=1]="Square",t[t.Strip=2]="Strip";var w=function(){function s(t,e,n,i){u(this,s),h(this,"context",void 0),h(this,"radius",void 0),h(this,"x",void 0),h(this,"y",void 0),h(this,"w",void 0),h(this,"h",void 0),h(this,"vx",void 0),h(this,"vy",void 0),h(this,"shape",void 0),h(this,"angle",void 0),h(this,"angularSpin",void 0),h(this,"color",void 0),h(this,"rotateY",void 0),h(this,"getOptions",void 0),this.getOptions=e;var r,o,a=this.getOptions().colors;this.context=t,this.x=n,this.y=i,this.w=y(5,20),this.h=y(5,20),this.radius=y(5,10),this.vx=y(-4,4),this.vy=y(-10,-0),this.shape=(r=0,o=2,Math.floor(r+Math.random()*(o-r+1))),this.angle=y(0,360)/(180*Math.PI),this.angularSpin=y(-.2,.2),this.color=a[Math.floor(Math.random()*a.length)],this.rotateY=y(0,1)}return e(s,[{key:"update",value:function(){var t=this.getOptions(),e=t.gravity,n=t.wind,i=t.friction,r=t.opacity,o=t.drawShape;if(this.x+=this.vx,this.y+=this.vy,this.vy+=e,this.vx+=n,this.vx*=i,this.vy*=i,this.rotateY<1?this.rotateY+=.1:this.rotateY=-1,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=r,this.context.lineCap="round",this.context.lineWidth=2,o&&"function"==typeof o)o.call(this,this.context);else switch(this.shape){case p.Cirlce:this.context.beginPath(),this.context.arc(0,0,this.radius,0,2*Math.PI),this.context.fill();break;case p.Square:this.context.fillRect(-this.w/2,-this.h/2,this.w,this.h);break;case p.Strip:this.context.fillRect(-this.w/6,-this.h/2,this.w/3,this.h)}this.context.closePath(),this.context.restore()}}]),s}(),g=function t(e,n){var g=this;u(this,t),h(this,"canvas",void 0),h(this,"context",void 0),h(this,"getOptions",void 0),h(this,"x",0),h(this,"y",0),h(this,"w",0),h(this,"h",0),h(this,"lastNumberOfPieces",0),h(this,"tweenInitTime",Date.now()),h(this,"particles",[]),h(this,"particlesGenerated",0),h(this,"removeParticleAt",function(t){g.particles.splice(t,1)}),h(this,"getParticle",function(){var t=y(g.x,g.w+g.x),e=y(g.y,g.h+g.y);return new w(g.context,g.getOptions,t,e)}),h(this,"animate",function(){var n=g.canvas,t=g.context,e=g.particlesGenerated,i=g.lastNumberOfPieces,r=g.getOptions(),o=r.run,a=r.recycle,s=r.numberOfPieces,c=r.debug,u=r.tweenFunction,h=r.tweenDuration;if(!o)return!1;var f=g.particles.length,l=a?f:e,p=Date.now();if(l<s){i!==s&&(g.tweenInitTime=p,g.lastNumberOfPieces=s);for(var v=g.tweenInitTime,d=u(h<p-v?h:Math.max(0,p-v),l,s,h),y=Math.round(d-l),w=0;w<y;w++)g.particles.push(g.getParticle());g.particlesGenerated+=y}return c&&(t.font="12px sans-serif",t.fillStyle="#333",t.textAlign="right",t.fillText("Particles: ".concat(f),n.width-10,n.height-20)),g.particles.forEach(function(t,e){t.update(),(t.y>n.height||t.y<-100||t.x>n.width+100||t.x<-100)&&(a&&l<=s?g.particles[e]=g.getParticle():g.removeParticleAt(e))}),0<f||l<s}),this.canvas=e;var i=this.canvas.getContext("2d");if(!i)throw new Error("Could not get canvas context");this.context=i,this.getOptions=n},b={width:"undefined"!=typeof window?window.innerWidth:300,height:"undefined"!=typeof window?window.innerHeight:200,numberOfPieces:200,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,debug:!1,tweenFunction:d.easeInOutQuad,tweenDuration:5e3,recycle:!0,run:!0},O=function(){function r(t,e){var i=this;u(this,r),h(this,"canvas",void 0),h(this,"context",void 0),h(this,"_options",void 0),h(this,"generator",void 0),h(this,"setOptionsWithDefaults",function(t){var e={confettiSource:{x:0,y:0,w:i.canvas.width,h:0}};i._options=o({},e,b,t),Object.assign(i,t.confettiSource)}),h(this,"update",function(){var t=i.options.run,e=i.canvas,n=i.context;t&&(n.fillStyle="white",n.clearRect(0,0,e.width,e.height)),i.generator.animate()?requestAnimationFrame(i.update):i._options.run=!1}),this.canvas=t;var n=this.canvas.getContext("2d");if(!n)throw new Error("Could not get canvas context");this.context=n,this.generator=new g(this.canvas,function(){return i.options}),this.options=e,this.update()}return e(r,[{key:"options",get:function(){return this._options},set:function(t){var e=this._options&&this._options.run;this.setOptionsWithDefaults(t),this.generator&&Object.assign(this.generator,this.options.confettiSource),"boolean"==typeof t.run&&t.run&&!1===e&&this.update()}}]),r}(),x=function(t){function s(){var t,e,n,i;u(this,s);for(var r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];return n=this,h(l(e=!(i=(t=f(s)).call.apply(t,[this].concat(o)))||"object"!=typeof i&&"function"!=typeof i?l(n):i),"canvas",c.createRef()),h(l(e),"confetti",void 0),e}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&&n(t,e)}(s,c.Component),e(s,[{key:"componentDidMount",value:function(){if(this.canvas.current){var t=M(this.props)[0];this.confetti=new O(this.canvas.current,t)}}},{key:"componentWillReceiveProps",value:function(t){var e=M(t)[0];this.confetti&&(this.confetti.options=e)}},{key:"render",value:function(){var t=a(M(this.props),2),e=t[0],n=t[1],i=o({zIndex:2,position:"absolute",top:0,left:0,bottom:0,right:0},n.style);return c.createElement("canvas",r({width:e.width,height:e.height,ref:this.canvas},n,{style:i}))}}]),s}();function M(t){var e={},n={},i=[].concat(s(Object.keys(b)),["confettiSource","drawShape"]);for(var r in t){var o=t[r];i.includes(r)?e[r]=o:n[r]=o}return[e,n]}return h(x,"defaultProps",o({},b)),x});
 //# sourceMappingURL=react-confetti.min.js.map

dist/types/Confetti.d.ts

@@ -18,2 +18,3 @@ import { IRect } from './Rect';
     tweenDuration: number;
+    drawShape?: (context: CanvasRenderingContext2D) => void;
 }
@@ -20,0 +21,0 @@ export declare const confettiDefaults: Pick<IConfettiOptions, Exclude<keyof IConfettiOptions, 'confettiSource'>>;

dist/types/Particle.d.ts

@@ -5,3 +5,3 @@ import { IConfettiOptions } from './Confetti';
     Square = 1,
-    Spiral = 2
+    Strip = 2
 }
@@ -8,0 +8,0 @@ export default class Particle {

dist/types/ReactConfetti.d.ts

@@ -14,2 +14,3 @@ import React, { CanvasHTMLAttributes } from 'react';
         opacity: number;
+        drawShape?: ((context: CanvasRenderingContext2D) => void) | undefined;
         run: boolean;
@@ -16,0 +17,0 @@ recycle: boolean;

package.json

 {
   "name": "react-confetti",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "React component to draw confetti for your party.",
@@ -5,0 +5,0 @@ "main": "dist/react-confetti.min.js",

README.md

@@ -55,3 +55,3 @@ # react-confetti
 | `gravity`        | `Number`                                                                                                   | 0.1                                                                                                                                                                                                                                                                                |                                                                       |
-| `colors`         | `String[]`                                                                                        | `['#f44336'`</br>`'#e91e63'`</br>`'#9c27b0'`</br>`'#673ab7'`</br>`'#3f51b5'`</br>`'#2196f3'`</br>`'#03a9f4'`</br>`'#00bcd4'`</br>`'#009688'`</br>`'#4CAF50'`</br>`'#8BC34A'`</br>`'#CDDC39'`</br>`'#FFEB3B'`</br>`'#FFC107'`</br>`'#FF9800'`</br>`'#FF5722'`</br>`'#795548']`</br> | All available Colors for the confetti pieces.                         |
+| `colors`         | `String[]`                                                                                                 | `['#f44336'`</br>`'#e91e63'`</br>`'#9c27b0'`</br>`'#673ab7'`</br>`'#3f51b5'`</br>`'#2196f3'`</br>`'#03a9f4'`</br>`'#00bcd4'`</br>`'#009688'`</br>`'#4CAF50'`</br>`'#8BC34A'`</br>`'#CDDC39'`</br>`'#FFEB3B'`</br>`'#FFC107'`</br>`'#FF9800'`</br>`'#FF5722'`</br>`'#795548']`</br> | All available Colors for the confetti pieces.                         |
 | `opacity`        | `Number`                                                                                                   | 1.0                                                                                                                                                                                                                                                                                |                                                                       |
@@ -62,2 +62,26 @@ | `recycle`        | `Bool`                                                                                                     | true                                                                                                                                                                                                                                                                               | Keep spawning confetti after `numberOfPieces` pieces have been shown. |
 | `tweenFunction`  | `(currentTime: number, currentValue: number, targetValue: number, duration: number, s?: number) => number` | easeInOutQuad                                                                                                                                                                                                                                                                      | See [tween-functions](https://github.com/chenglou/tween-functions)    |
+| `drawShape`      | `(context: CanvasRenderingContext2D) => void`                                                              | `undefined`                                                                                                                                                                                                                                                                        | See below
 
+
+
+# `drawShape()`
+
+Draw a custom shape for a particle. If not provided, defaults to a random selection of a square, circle or strip confetto. The function is called with the canvas context as a parameter and the [Particle](src/Particle.ts) as the `this` context.
+
+For example, to draw all spirals:
+
+```jsx
+<Confetti
+  drawShape={ctx => {
+    ctx.beginPath()
+    for(let i = 0; i < 22; i++) {
+      const angle = 0.35 * i
+      const x = (0.2 + (1.5 * angle)) * Math.cos(angle)
+      const y = (0.2 + (1.5 * angle)) * Math.sin(angle)
+      ctx.lineTo(x, y)
+    }
+    ctx.stroke()
+    ctx.closePath()
+  }}
+/>
+```

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

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

Total package byte prevSize

133215

increased by0.91%

Number of lines in readme file

86

increased by38.71%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

952

decreased by-0.1%

No dependency changes