react-confetti-explosion
Version:
A lightweight css-animation based confetti exploder for React
3 lines (2 loc) • 6.16 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=require("react-dom");function e(n){if(n&&n.__esModule)return n;var t=Object.create(null);return n&&Object.keys(n).forEach((function(e){if("default"!==e){var r=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,r.get?r:{enumerable:!0,get:function(){return n[e]}})}})),t.default=n,Object.freeze(t)}var r=e(n),o=function(){return o=Object.assign||function(n){for(var t,e=1,r=arguments.length;e<r;e++)for(var o in t=arguments[e])Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var a=function(n,t,e,r,o){return(n-t)*(o-r)/(e-t)+r},c=function(n,t){var e=n+t;return e>360?e-360:e},i=function(){return Math.random()>.5},s=function(n,t){return void 0===t&&(t=2),Math.round(n*Math.pow(10,t))/Math.pow(10,t)},l=[0,0,1],u=[[1,1,0],[1,0,1],[0,1,1],[1,0,0],[0,1,0],l],f=function(n,t,e,r,o,f){var d=Math.round(600*Math.random()+200),p=Math.round(Math.random()*(u.length-1)),m=e-Math.round(1e3*Math.random()),h=Math.random()<.1,v=function(n){return!u[n].every((function(n,t){return n===l[t]}))&&i()}(p),y=h?s(.25*Math.random(),2):0,g=-1*y,b=y,M=s(Math.abs(a(Math.abs(c(t.degree,90)-180),0,180,-1,1)),4),x=s(.5*Math.random(),4),w=s(Math.random()*r*(i()?1:-1),4),C=s(Math.max(a(Math.abs(t.degree-180),0,180,r,-r),0),4),O="confetti-particle-".concat(f);return{className:O,style:"\n .".concat(n," .").concat(O," {\n animation: x-axis-").concat(f," ").concat(m,"ms forwards cubic-bezier(").concat(y,", ").concat(g,", ").concat(b,", ").concat(M,");\n }\n .").concat(n," .").concat(O," > div {\n width: ").concat(v?o:Math.round(4*Math.random())+o/2,"px;\n height: ").concat(v?o:Math.round(2*Math.random())+o,"px;\n animation: y-axis ").concat(m,"ms forwards cubic-bezier(").concat(x,", ").concat(w,", ").concat(.5,", ").concat(C,");\n }\n .").concat(n," .").concat(O," > div::after {\n background-color: ").concat(t.color,";\n animation: rotation-").concat(p," ").concat(d,"ms infinite linear;\n ").concat(v?"border-radius: 50%;":"","\n }\n ")}},d=function(n){var t=n.particles,e=n.duration,r=n.height,o=n.width,i=n.force,s=n.particleSize,l=Math.random().toString(36).substring(2,8),d="confetti-".concat(l,"-container"),p="confetti-".concat(l,"-screen"),m="\n .".concat(d," {\n width: 0;\n height: 0;\n position: relative;\n }\n .").concat(p," {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n pointer-events: none;\n }\n .").concat(p,' [class*="confetti-particle"] > div {\n position: absolute;\n left: 0;\n top: 0;\n }\n .').concat(p," [class*=\"confetti-particle\"] > div::after {\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n }\n "),h=u.map((function(n,t){return"\n @keyframes rotation-".concat(t," {\n 50% {\n transform: rotate3d(").concat(n.map((function(n){return n/2})).join(),", 180deg);\n }\n 100% {\n transform: rotate3d(").concat(n.join(),", 360deg);\n }\n }\n ")})).join("\n"),v=function(n,t,e){var r="string"==typeof t?t:"".concat(t,"px"),o=n.map((function(n,t){var r=a(Math.abs(c(n,90)-180),0,180,-e/2,e/2);return"\n @keyframes x-axis-".concat(t," {\n to {\n transform: translateX(").concat(r,"px);\n }\n }\n ")})).join("\n");return"\n @keyframes y-axis {\n to {\n transform: translateY(".concat(r,");\n }\n }\n ").concat(o,"\n ")}(t.map((function(n){return n.degree})),r,o),y=t.map((function(n,t){return f(p,n,e,i,s,t)})),g="\n ".concat(m,"\n ").concat(h,"\n ").concat(v,"\n ").concat(y.map((function(n){return n.style})).join("\n"),"\n ");return{containerClass:d,screenClass:p,particleClasses:y.map((function(n){return n.className})),styles:g}},p=["#FFC700","#FF0000","#2E3191","#41BBC7"],m=function(n,t){var e,r=360/n;return(e=n,Array.from({length:e},(function(n,t){return t}))).map((function(n){return{color:t[n%t.length],degree:r*n}}))},h=function(n){var e,a=n.particleCount,c=void 0===a?100:a,i=n.duration,s=void 0===i?2200:i,l=n.colors,u=void 0===l?p:l,f=n.particleSize,h=void 0===f?12:f,v=n.force,y=void 0===v?.5:v,g=n.height,b=void 0===g?"120vh":g,M=n.width,x=void 0===M?1e3:M,w=n.portal,C=void 0===w||w,O=n.zIndex,j=n.onComplete,E=function(n,t){var e={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(e[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(n);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(n,r[o])&&(e[r[o]]=n[r[o]])}return e}(n,["particleCount","duration","colors","particleSize","force","height","width","portal","zIndex","onComplete"]),S=r.useState(),z=S[0],k=S[1],P=m(c,u),_=function(n){var t=d(n);return{containerClass:t.containerClass,screenClass:t.screenClass,particleClasses:t.particleClasses,styles:t.styles}}({particles:P,duration:s,height:b,width:x,force:y,particleSize:h}),F=_.containerClass,I=_.screenClass,N=_.particleClasses,B=_.styles,T=r.useCallback((function(n){if(n){var t=n.getBoundingClientRect(),e=t.top,r=t.left;k({top:e,left:r})}}),[]);return r.useEffect((function(){if("function"==typeof j){var n=setTimeout(j,s);return function(){return clearTimeout(n)}}}),[s,j]),r.createElement("div",o({ref:T,className:F},E),r.createElement("style",{dangerouslySetInnerHTML:{__html:B}}),z&&r.createElement(r.Fragment,null,(e=r.createElement("div",o({"data-slot":"confetti-explosion-screen",className:I},O?{style:{zIndex:O}}:null),r.createElement("div",{style:{position:"absolute",top:z.top,left:z.left}},P.map((function(n,t){return r.createElement("div",{className:N[t],key:n.degree},r.createElement("div",null))})))),C?t.createPortal(e,document.body):e)))},v=function(n){return"undefined"==typeof window||void 0===window.location?null:r.createElement(h,o({},n))};exports.ConfettiExplosion=v,exports.default=v;
//# sourceMappingURL=index.js.map