react-sparkle - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/index.js

@@ -1,1 +0,1 @@
-module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=9)}([function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";n.r(t),function(e){var n=function(){if("undefined"!=typeof Map)return Map;function e(e,t){var n=-1;return e.some(function(e,r){return e[0]===t&&(n=r,!0)}),n}return function(){function t(){this.__entries__=[]}var n={size:{configurable:!0}};return n.size.get=function(){return this.__entries__.length},t.prototype.get=function(t){var n=e(this.__entries__,t),r=this.__entries__[n];return r&&r[1]},t.prototype.set=function(t,n){var r=e(this.__entries__,t);~r?this.__entries__[r][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,r=e(n,t);~r&&n.splice(r,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t.prototype.clear=function(){this.__entries__.splice(0)},t.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var n=0,r=this.__entries__;n<r.length;n+=1){var i=r[n];e.call(t,i[1],i[0])}},Object.defineProperties(t.prototype,n),t}()}(),r="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,i=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),o="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(i):function(e){return setTimeout(function(){return e(Date.now())},1e3/60)},a=2,s=["top","right","bottom","left","width","height","size","weight"],u="undefined"!=typeof MutationObserver,c=function(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var n=!1,r=!1,i=0;function s(){n&&(n=!1,e()),r&&c()}function u(){o(s)}function c(){var e=Date.now();if(n){if(e-i<a)return;r=!0}else n=!0,r=!1,setTimeout(u,t);i=e}return c}(this.refresh.bind(this),20)};c.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},c.prototype.removeObserver=function(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()},c.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},c.prototype.updateObservers_=function(){var e=this.observers_.filter(function(e){return e.gatherActive(),e.hasActive()});return e.forEach(function(e){return e.broadcastActive()}),e.length>0},c.prototype.connect_=function(){r&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),u?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},c.prototype.disconnect_=function(){r&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},c.prototype.onTransitionEnd_=function(e){var t=e.propertyName;void 0===t&&(t=""),s.some(function(e){return!!~t.indexOf(e)})&&this.refresh()},c.getInstance=function(){return this.instance_||(this.instance_=new c),this.instance_},c.instance_=null;var l=function(e,t){for(var n=0,r=Object.keys(t);n<r.length;n+=1){var i=r[n];Object.defineProperty(e,i,{value:t[i],enumerable:!1,writable:!1,configurable:!0})}return e},h=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||i},f=m(0,0,0,0);function p(e){return parseFloat(e)||0}function d(e){for(var t=[],n=arguments.length-1;n-- >0;)t[n]=arguments[n+1];return t.reduce(function(t,n){return t+p(e["border-"+n+"-width"])},0)}function v(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return f;var r=h(e).getComputedStyle(e),i=function(e){for(var t={},n=0,r=["top","right","bottom","left"];n<r.length;n+=1){var i=r[n],o=e["padding-"+i];t[i]=p(o)}return t}(r),o=i.left+i.right,a=i.top+i.bottom,s=p(r.width),u=p(r.height);if("border-box"===r.boxSizing&&(Math.round(s+o)!==t&&(s-=d(r,"left","right")+o),Math.round(u+a)!==n&&(u-=d(r,"top","bottom")+a)),!function(e){return e===h(e).document.documentElement}(e)){var c=Math.round(s+o)-t,l=Math.round(u+a)-n;1!==Math.abs(c)&&(s-=c),1!==Math.abs(l)&&(u-=l)}return m(i.left,i.top,s,u)}var y="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof h(e).SVGGraphicsElement}:function(e){return e instanceof h(e).SVGElement&&"function"==typeof e.getBBox};function b(e){return r?y(e)?function(e){var t=e.getBBox();return m(0,0,t.width,t.height)}(e):v(e):f}function m(e,t,n,r){return{x:e,y:t,width:n,height:r}}var _=function(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=m(0,0,0,0),this.target=e};_.prototype.isActive=function(){var e=b(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},_.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e};var w=function(e,t){var n,r,i,o,a,s,u,c=(r=(n=t).x,i=n.y,o=n.width,a=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,u=Object.create(s.prototype),l(u,{x:r,y:i,width:o,height:a,top:i,right:r+o,bottom:a+i,left:r}),u);l(this,{target:e,contentRect:c})},g=function(e,t,r){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=r};g.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof h(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new _(e)),this.controller_.addObserver(this),this.controller_.refresh())}},g.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof h(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},g.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},g.prototype.gatherActive=function(){var e=this;this.clearActive(),this.observations_.forEach(function(t){t.isActive()&&e.activeObservations_.push(t)})},g.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(function(e){return new w(e.target,e.broadcastRect())});this.callback_.call(e,t,e),this.clearActive()}},g.prototype.clearActive=function(){this.activeObservations_.splice(0)},g.prototype.hasActive=function(){return this.activeObservations_.length>0};var k="undefined"!=typeof WeakMap?new WeakMap:new n,O=function(e){if(!(this instanceof O))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var t=c.getInstance(),n=new g(e,t,this);k.set(this,n)};["observe","unobserve","disconnect"].forEach(function(e){O.prototype[e]=function(){return(t=k.get(this))[e].apply(t,arguments);var t}});var M=void 0!==i.ResizeObserver?i.ResizeObserver:O;t.default=M}.call(this,n(0))},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";var r=function(e){};e.exports=function(e,t,n,i,o,a,s,u){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[n,i,o,a,s,u],h=0;(c=new Error(t.replace(/%s/g,function(){return l[h++]}))).name="Invariant Violation"}throw c.framesToPop=1,c}}},function(e,t,n){"use strict";function r(e){return function(){return e}}var i=function(){};i.thatReturns=r,i.thatReturnsFalse=r(!1),i.thatReturnsTrue=r(!0),i.thatReturnsNull=r(null),i.thatReturnsThis=function(){return this},i.thatReturnsArgument=function(e){return e},e.exports=i},function(e,t,n){"use strict";var r=n(4),i=n(3),o=n(2);e.exports=function(){function e(e,t,n,r,a,s){s!==o&&i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){e.exports=n(5)()},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=s(n(7)),o=s(n(6)),a=s(n(1));function s(e){return e&&e.__esModule?e:{default:e}}var u=[0,6,13,20],c=new Image;c.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAHCAYAAAD5wDa1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNDNFMzM5REEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNDNFMzM5RUEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0M0UzMzlCQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0M0UzMzlDQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jzOsUQAAANhJREFUeNqsks0KhCAUhW/Sz6pFSc1AD9HL+OBFbdsVOKWLajH9EE7GFBEjOMxcUNHD8dxPBCEE/DKyLGMqraoqcd4j0ChpUmlBEGCFRBzH2dbj5JycJAn90CEpy1J2SK4apVSM4yiKonhePYwxMU2TaJrm8BpykpWmKQ3D8FbX9SOO4/tOhDEG0zRhGAZo2xaiKDLyPGeSyPM8sCxr868+WC/mvu9j13XBtm1ACME8z7AsC/R9r0fGOf+arOu6jUwS7l6tT/B+xo+aDFRo5BykHfav3/gSYAAtIdQ1IT0puAAAAABJRU5ErkJggg==";var l={slowest:50,slower:20,slow:12,normal:7,fast:4,faster:2,fastest:0},h=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var n=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.sparkleWrapper=null,n.sparkleCanvas=null,n.sparkleContext=null,n.sparkles=[],n.animationFrame=null,n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),r(t,[{key:"componentDidMount",value:function(){this.init()}},{key:"componentWillUnmount",value:function(){this.end()}},{key:"init",value:function(){this.sparkleCanvas?(this.sparkleContext=this.sparkleCanvas.getContext("2d"),this.parentResizeObserver(),this.start()):console.warn("No sparkles today :( The canvas did not render.")}},{key:"start",value:function(){this.createSparkles(),this.drawSparkles(),this.updateSparkles()}},{key:"end",value:function(){window.cancelAnimationFrame(this.animationFrame),this.sparkles=[]}},{key:"sizeCanvas",value:function(e,t){var n=this.props.overflowPx;this.sparkleCanvas.width=e+2*n,this.sparkleCanvas.height=t+2*n}},{key:"parentResizeObserver",value:function(){var e=this;new a.default(function(t,n){var r=!0,i=!1,o=void 0;try{for(var a,s=t[Symbol.iterator]();!(r=(a=s.next()).done);r=!0){var u=a.value.contentRect,c=u.width,l=u.height;e.sizeCanvas(c,l)}}catch(e){i=!0,o=e}finally{try{!r&&s.return&&s.return()}finally{if(i)throw o}}}).observe(this.sparkleWrapper.parentNode)}},{key:"randomSparkleSize",value:function(){var e=this.props,t=e.minSize,n=e.maxSize;return Math.floor(Math.random()*(n-t+1)+t)}},{key:"randomHexColor",value:function(){return"#"+("000000"+Math.floor(16777215*Math.random()).toString(16)).slice(-6)}},{key:"getColor",value:function(){var e=this.props.color;return"random"===e?this.randomHexColor():Array.isArray&&Array.isArray(e)||e instanceof Array?e[Math.floor(Math.random()*e.length)]:e}},{key:"getOpacity",value:function(){return Math.random()}},{key:"getSpriteVariant",value:function(){return u[Math.floor(Math.random()*u.length)]}},{key:"recreateSparkle",value:function(e){var t=this.randomSparkleSize();return Object.assign(e,{position:{x:Math.floor(Math.random()*(this.sparkleCanvas.width-t)),y:Math.floor(Math.random()*(this.sparkleCanvas.height-t))},size:t,opacity:this.getOpacity(),color:this.getColor(),variant:this.getSpriteVariant()})}},{key:"createSparkle",value:function(){return this.recreateSparkle({})}},{key:"createSparkles",value:function(){for(var e=this.props.count,t=0;t<e;t++)this.sparkles.push(this.createSparkle())}},{key:"drawSparkles",value:function(){if(this.sparkleCanvas&&this.sparkleContext){this.sparkleContext.clearRect(0,0,this.sparkleCanvas.width,this.sparkleCanvas.height);var e=this;this.sparkles.forEach(function(t){e.sparkleContext.save(),e.sparkleContext.globalAlpha=t.opacity,e.sparkleContext.drawImage(c,t.variant,0,7,7,t.position.x,t.position.y,t.size,t.size),t.color&&(e.sparkleContext.globalCompositeOperation="source-atop",e.sparkleContext.globalAlpha=.6,e.sparkleContext.fillStyle=t.color,e.sparkleContext.fillRect(t.position.x,t.position.y,t.size,t.size)),e.sparkleContext.restore()})}}},{key:"updateSparkles",value:function(){var e=this,t=this.props,n=t.flicker,r=t.flickerSpeed,i=t.fadeOutSpeed,o=t.newSparkleOnFadeOut,a=this;this.animationFrame=window.requestAnimationFrame(function(t){var s=Math.floor(t);e.sparkles.forEach(function(e){if(e.opacity-=.001*i,n){var t=l[r];s%Math.floor(Math.random()*t+1)==0&&(e.variant=a.getSpriteVariant())}e.opacity<0&&(o?a.recreateSparkle(e):e.opacity=a.getOpacity())}),a.drawSparkles(),a.updateSparkles()})}},{key:"render",value:function(){var e=this,t=this.props.overflowPx;return i.default.createElement("span",{ref:function(t){e.sparkleWrapper=t},style:{width:"100%",height:"100%",overflow:"visible",position:"absolute",top:"-"+t+"px",left:"-"+t+"px",pointerEvents:"none"}},i.default.createElement("canvas",{ref:function(t){e.sparkleCanvas=t}}))}}]),t}();h.propTypes={color:o.default.oneOfType([o.default.string,o.default.arrayOf(o.default.string)]),count:o.default.number,minSize:o.default.number,maxSize:o.default.number,overflowPx:o.default.number,fadeOutSpeed:o.default.number,newSparkleOnFadeOut:o.default.bool,flicker:o.default.bool,flickerSpeed:o.default.oneOf(["slowest","slower","slow","normal","fast","faster","fastest"])},h.defaultProps={color:"#FFF",count:50,minSize:5,maxSize:8,overflowPx:20,fadeOutSpeed:50,newSparkleOnFadeOut:!0,flicker:!0,flickerSpeed:"normal"},t.default=h},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r,i=n(8),o=(r=i)&&r.__esModule?r:{default:r};t.default=o.default}]);
+module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=6)}([function(e,t,n){e.exports=n(3)()},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";(function(e){var n=function(){if("undefined"!=typeof Map)return Map;function e(e,t){var n=-1;return e.some((function(e,r){return e[0]===t&&(n=r,!0)})),n}return(function(){function t(){this.__entries__=[]}return Object.defineProperty(t.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),t.prototype.get=function(t){var n=e(this.__entries__,t),r=this.__entries__[n];return r&&r[1]},t.prototype.set=function(t,n){var r=e(this.__entries__,t);~r?this.__entries__[r][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,r=e(n,t);~r&&n.splice(r,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t.prototype.clear=function(){this.__entries__.splice(0)},t.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var n=0,r=this.__entries__;n<r.length;n++){var o=r[n];e.call(t,o[1],o[0])}},t}())}(),r="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,o=void 0!==e&&e.Math===Math?e:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),i="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(o):function(e){return setTimeout((function(){return e(Date.now())}),1e3/60)},a=2;var s=20,c=["top","right","bottom","left","width","height","size","weight"],u="undefined"!=typeof MutationObserver,l=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var n=!1,r=!1,o=0;function s(){n&&(n=!1,e()),r&&u()}function c(){i(s)}function u(){var e=Date.now();if(n){if(e-o<a)return;r=!0}else n=!0,r=!1,setTimeout(c,t);o=e}return u}(this.refresh.bind(this),s)}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter((function(e){return e.gatherActive(),e.hasActive()}));return e.forEach((function(e){return e.broadcastActive()})),e.length>0},e.prototype.connect_=function(){r&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),u?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){r&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,n=void 0===t?"":t;c.some((function(e){return!!~n.indexOf(e)}))&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),h=function(e,t){for(var n=0,r=Object.keys(t);n<r.length;n++){var o=r[n];Object.defineProperty(e,o,{value:t[o],enumerable:!1,writable:!1,configurable:!0})}return e},p=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||o},f=_(0,0,0,0);function d(e){return parseFloat(e)||0}function v(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.reduce((function(t,n){return t+d(e["border-"+n+"-width"])}),0)}function y(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return f;var r=p(e).getComputedStyle(e),o=function(e){for(var t={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var o=r[n],i=e["padding-"+o];t[o]=d(i)}return t}(r),i=o.left+o.right,a=o.top+o.bottom,s=d(r.width),c=d(r.height);if("border-box"===r.boxSizing&&(Math.round(s+i)!==t&&(s-=v(r,"left","right")+i),Math.round(c+a)!==n&&(c-=v(r,"top","bottom")+a)),!function(e){return e===p(e).document.documentElement}(e)){var u=Math.round(s+i)-t,l=Math.round(c+a)-n;1!==Math.abs(u)&&(s-=u),1!==Math.abs(l)&&(c-=l)}return _(o.left,o.top,s,c)}var b="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof p(e).SVGGraphicsElement}:function(e){return e instanceof p(e).SVGElement&&"function"==typeof e.getBBox};function m(e){return r?b(e)?function(e){var t=e.getBBox();return _(0,0,t.width,t.height)}(e):y(e):f}function _(e,t,n,r){return{x:e,y:t,width:n,height:r}}var w=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=_(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=m(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),g=function(e,t){var n,r,o,i,a,s,c,u=(r=(n=t).x,o=n.y,i=n.width,a=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,c=Object.create(s.prototype),h(c,{x:r,y:o,width:i,height:a,top:o,right:r+i,bottom:a+o,left:r}),c);h(this,{target:e,contentRect:u})},k=function(){function e(e,t,r){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=r}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof p(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new w(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof p(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var e=this;this.clearActive(),this.observations_.forEach((function(t){t.isActive()&&e.activeObservations_.push(t)}))},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map((function(e){return new g(e.target,e.broadcastRect())}));this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return this.activeObservations_.length>0},e}(),O="undefined"!=typeof WeakMap?new WeakMap:new n,M=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=l.getInstance(),r=new k(t,n,this);O.set(this,r)};["observe","unobserve","disconnect"].forEach((function(e){M.prototype[e]=function(){var t;return(t=O.get(this))[e].apply(t,arguments)}}));var S=void 0!==o.ResizeObserver?o.ResizeObserver:M;t.a=S}).call(this,n(5))},function(e,t,n){"use strict";var r=n(4);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,i,a){if(a!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r),i=n(0),a=n.n(i),s=n(2);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e,t){return!t||"object"!==c(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function h(e){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var f=[0,6,13,20],d=new Image;d.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAHCAYAAAD5wDa1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNDNFMzM5REEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNDNFMzM5RUEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0M0UzMzlCQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0M0UzMzlDQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jzOsUQAAANhJREFUeNqsks0KhCAUhW/Sz6pFSc1AD9HL+OBFbdsVOKWLajH9EE7GFBEjOMxcUNHD8dxPBCEE/DKyLGMqraoqcd4j0ChpUmlBEGCFRBzH2dbj5JycJAn90CEpy1J2SK4apVSM4yiKonhePYwxMU2TaJrm8BpykpWmKQ3D8FbX9SOO4/tOhDEG0zRhGAZo2xaiKDLyPGeSyPM8sCxr868+WC/mvu9j13XBtm1ACME8z7AsC/R9r0fGOf+arOu6jUwS7l6tT/B+xo+aDFRo5BykHfav3/gSYAAtIdQ1IT0puAAAAABJRU5ErkJggg==";var v={slowest:50,slower:20,slow:12,normal:7,fast:4,faster:2,fastest:0},y=function(e){function t(e){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(n=l(this,h(t).call(this,e))).sparkleWrapper=null,n.sparkleCanvas=null,n.sparkleContext=null,n.sparkles=[],n.animationFrame=null,n}var n,r,i;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&p(e,t)}(t,e),n=t,(r=[{key:"componentDidMount",value:function(){this.init()}},{key:"componentWillUnmount",value:function(){this.end()}},{key:"init",value:function(){this.sparkleCanvas?(this.sparkleContext=this.sparkleCanvas.getContext("2d"),this.parentResizeObserver(),this.start()):console.warn("No sparkles today :( The canvas did not render.")}},{key:"start",value:function(){this.createSparkles(),this.drawSparkles(),this.updateSparkles()}},{key:"end",value:function(){window.cancelAnimationFrame(this.animationFrame),this.sparkles=[]}},{key:"sizeCanvas",value:function(e,t){if(this.sparkleCanvas){var n=this.props.overflowPx;this.sparkleCanvas.width=e+2*n,this.sparkleCanvas.height=t+2*n}}},{key:"parentResizeObserver",value:function(){var e=this;new s.a((function(t,n){var r=!0,o=!1,i=void 0;try{for(var a,s=t[Symbol.iterator]();!(r=(a=s.next()).done);r=!0){var c=a.value.contentRect,u=c.width,l=c.height;e.sizeCanvas(u,l)}}catch(e){o=!0,i=e}finally{try{r||null==s.return||s.return()}finally{if(o)throw i}}})).observe(this.sparkleWrapper.parentNode)}},{key:"randomSparkleSize",value:function(){var e=this.props,t=e.minSize,n=e.maxSize;return Math.floor(Math.random()*(n-t+1)+t)}},{key:"randomHexColor",value:function(){return"#"+("000000"+Math.floor(16777215*Math.random()).toString(16)).slice(-6)}},{key:"getColor",value:function(){var e=this.props.color;return"random"===e?this.randomHexColor():Array.isArray&&Array.isArray(e)||e instanceof Array?e[Math.floor(Math.random()*e.length)]:e}},{key:"getOpacity",value:function(){return Math.random()}},{key:"getSpriteVariant",value:function(){return f[Math.floor(Math.random()*f.length)]}},{key:"recreateSparkle",value:function(e){if(this.sparkleCanvas){var t=this.randomSparkleSize();return Object.assign(e,{position:{x:Math.floor(Math.random()*(this.sparkleCanvas.width-t)),y:Math.floor(Math.random()*(this.sparkleCanvas.height-t))},size:t,opacity:this.getOpacity(),color:this.getColor(),variant:this.getSpriteVariant()})}}},{key:"createSparkle",value:function(){return this.recreateSparkle({})}},{key:"createSparkles",value:function(){for(var e=this.props.count,t=0;t<e;t++)this.sparkles.push(this.createSparkle())}},{key:"drawSparkles",value:function(){if(this.sparkleCanvas&&this.sparkleContext){this.sparkleContext.clearRect(0,0,this.sparkleCanvas.width,this.sparkleCanvas.height);var e=this;this.sparkles.forEach((function(t){e.sparkleContext.save(),e.sparkleContext.globalAlpha=t.opacity,e.sparkleContext.drawImage(d,t.variant,0,7,7,t.position.x,t.position.y,t.size,t.size),t.color&&(e.sparkleContext.globalCompositeOperation="source-atop",e.sparkleContext.globalAlpha=.6,e.sparkleContext.fillStyle=t.color,e.sparkleContext.fillRect(t.position.x,t.position.y,t.size,t.size)),e.sparkleContext.restore()}))}}},{key:"updateSparkles",value:function(){var e=this,t=this.props,n=t.flicker,r=t.flickerSpeed,o=t.fadeOutSpeed,i=t.newSparkleOnFadeOut,a=this;this.animationFrame=window.requestAnimationFrame((function(t){var s=Math.floor(t);e.sparkles.forEach((function(e){if(e.opacity-=.001*o,n){var t=v[r];s%Math.floor(Math.random()*t+1)==0&&(e.variant=a.getSpriteVariant())}e.opacity<0&&(i?a.recreateSparkle(e):e.opacity=a.getOpacity())})),a.drawSparkles(),a.updateSparkles()}))}},{key:"render",value:function(){var e=this,t=this.props.overflowPx;return o.a.createElement("span",{ref:function(t){e.sparkleWrapper=t},style:{width:"100%",height:"100%",overflow:"visible",position:"absolute",top:"-".concat(t,"px"),left:"-".concat(t,"px"),pointerEvents:"none"}},o.a.createElement("canvas",{ref:function(t){e.sparkleCanvas=t}}))}}])&&u(n.prototype,r),i&&u(n,i),t}(o.a.Component);y.propTypes={color:a.a.oneOfType([a.a.string,a.a.arrayOf(a.a.string)]),count:a.a.number,minSize:a.a.number,maxSize:a.a.number,overflowPx:a.a.number,fadeOutSpeed:a.a.number,newSparkleOnFadeOut:a.a.bool,flicker:a.a.bool,flickerSpeed:a.a.oneOf(["slowest","slower","slow","normal","fast","faster","fastest"])},y.defaultProps={color:"#FFF",count:50,minSize:5,maxSize:8,overflowPx:20,fadeOutSpeed:50,newSparkleOnFadeOut:!0,flicker:!0,flickerSpeed:"normal"};var b=y;t.default=b}]);

package.json

 {
   "name": "react-sparkle",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A React component to increase the number of sparkles in your app",
@@ -25,20 +25,21 @@ "homepage": "https://github.com/kmjennison/react-sparkle",
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-jest": "^23.0.0-alpha.0",
-    "babel-loader": "^7.1.4",
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-react": "^7.0.0",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
     "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "jest": "^22.4.2",
-    "prop-types": "^15.6.1",
-    "react-dom": "^16.2.0",
-    "standard": "^11.0.1",
-    "webpack": "^4.1.1",
-    "webpack-cli": "^2.0.12"
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "jest": "^24.9.0",
+    "jest-canvas-mock": "^2.1.1",
+    "prop-types": "^15.7.2",
+    "react-dom": "^16.10.1",
+    "standard": "^14.3.1",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9"
   },
   "dependencies": {
-    "react": "^16.2.0",
-    "resize-observer-polyfill": "^1.5.0"
+    "react": "^16.10.1",
+    "resize-observer-polyfill": "^1.5.1"
   },
@@ -49,3 +50,8 @@ "jest": {
     ],
-    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/setupTests.js"
+    ],
     "testPathIgnorePatterns": [
@@ -52,0 +58,0 @@ "<rootDir>[/\\\\](build|dist|docs|node_modules)[/\\\\]"

README.md

 [![Build Status](https://travis-ci.org/kmjennison/react-sparkle.svg?branch=master)](https://travis-ci.org/kmjennison/react-sparkle)
+[![npm](https://img.shields.io/npm/v/react-sparkle.svg)](https://www.npmjs.com/package/react-sparkle)
+[![npm](https://img.shields.io/npm/dt/react-sparkle.svg)](https://www.npmjs.com/package/react-sparkle)
+
+
 # react-sparkle
 Make your React app more :sparkles:sparkly:sparkles:
+
+## How to Use
+
+Install: `yarn add react-sparkle` or `npm install react-sparkle`
+
+Add `Sparkle` as a child of the element you want to add sparkles to. _Important:_ the parent element must have either `relative` or `absolute` positioning.
+
+```js
+import React from 'react'
+import Sparkle from 'react-sparkle'
+
+class SparklyThing extends React.Component {
+  // Note: the parent of Sparkle must be positioned relatively or absolutely
+  render () {
+    return (
+      <div style={{ position: 'relative' }}>
+        <Sparkle />
+      </div>
+    )
+  }
+}
+```
+
+## Options
+
+All props are optional. These are the defaults:
+
+```js
+<Sparkle
+  // The color of the sparkles. Can be a color, an array of colors,
+  // or 'random' (which will randomly pick from all hex colors).
+  color={'#FFF'}
+  
+  // The number of sparkles to render. A large number could slow
+  // down the page.
+  count={50}
+  
+  // The minimum and maximum diameter of sparkles, in pixels.
+  minSize={5}
+  maxSize={8}
+  
+  // The number of pixels the sparkles should extend beyond the
+  // bounds of the parent element.
+  overflowPx={20}
+  
+  // How quickly sparkles disappear; in other words, how quickly
+  // new sparkles are created. Should be between 0 and 1000,
+  // with 0 never fading sparkles out and 1000 immediately
+  // removing sparkles. Most meaningful speeds are between
+  // 0 and 150.
+  fadeOutSpeed={50}
+  
+  // Whether we should create an entirely new sparkle when one
+  // fades out. If false, we'll just reset the opacity, keeping
+  // all other attributes of the sparkle the same.
+  newSparkleOnFadeOut={true}
+  
+  // Whether sparkles should have a "flickering" effect.
+  flicker={true}
+  
+  // How quickly the "flickering" should happen.
+  // One of: 'slowest', 'slower', 'slow', 'normal', 'fast', 'faster', 'fastest'
+  flickerSpeed={'normal'}
+/>
+```
+
+## Possible Future Features
+Features that would be good to add:
+* An `active` prop to turn the sparkles on and off
+* An option to fade in new sparkles
+* Sparkle movement
+   * "Wandering" movement, as in [jQuery Canvas Sparkles](https://github.com/simeydotme/jQuery-canvas-sparkles).
+   * Function-based movement likelihood (e.g. gravity-esque behavior)
+   * We would recreate sparkles when they leave the canvas
+* Larger-sized sparkles that still look good (the existing sprites get blurry); possibly use drawn canvas shapes instead of image sprites
+* Declarative updates for the number of sparkles, canvas size, and fade out speed. Currently, updating these requires re-mounting the component.
+
+## Acknowledgements
+This code was inspired by and based on [jQuery Canvas Sparkles](https://github.com/simeydotme/jQuery-canvas-sparkles).

setupTests.js

@@ -9,26 +9,4 @@ /* eslint-env jest */
 import 'babel-polyfill'
-import createContext2d from './mockCanvasContext2d'
 
 // Initialize Enzyme
 configure({ adapter: new Adapter() })
-
-// Render a mock canvas element
-const mockCanvas = () => {
-  var doc = window.document
-  var createElem = window.document.createElement
-
-  // Override `createElement` when creating a canvas elem
-  global.document.createElement = (elem) => {
-    if (elem === 'canvas') {
-      // Mock canvas
-      const div = createElem.call(doc, 'div')
-      div.getContext = createContext2d
-      div.toDataUrl = jest.fn()
-      return div
-    } else {
-      return createElem.call(doc, elem)
-    }
-  }
-}
-
-mockCanvas()

src/SparkleComponent.js

@@ -66,2 +66,6 @@ /* globals Image */
   sizeCanvas (parentWidth, parentHeight) {
+    if (!this.sparkleCanvas) {
+      return
+    }
+
     const { overflowPx } = this.props
@@ -123,2 +127,6 @@
   recreateSparkle (existingSparkle) {
+    if (!this.sparkleCanvas) {
+      return
+    }
+
     const size = this.randomSparkleSize()
@@ -306,2 +314,3 @@ return Object.assign(existingSparkle, {
 // Features that would be good to add:
+// - "active" prop to turn on and off
 // - Option to fade in new sparkles
@@ -315,2 +324,4 @@ // - Sparkle movement
 //   instead of sprites
+// - Declarative updates for the number of sparkles, canvas size,
+//   and fade out speed
 export default Sparkle

webpack.config.js

@@ -26,9 +26,9 @@ var path = require('path')
     // Use the parent project's React dependency
-    'react': {
-      'commonjs': 'react',
-      'commonjs2': 'react',
-      'amd': 'react',
-      'root': 'React' // will be window.React
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'react',
+      root: 'React' // will be window.React
     }
   }
 }

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

307077

increased by13.47%

Number of lines in readme file

87

increased by2075%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Dev dependency count

15

increased by7.14%

Number of package files

12

decreased by-14.29%

Lines of code

352

decreased by-17.76%

Dependency changes

• Updatedreact@^16.10.1

• Updatedresize-observer-polyfill@^1.5.1