react-confetti-explosion/dist/index.esm.js

A lightweight css-animation based confetti exploder for React

import*as n from"react";import{createPortal as t}from"react-dom";var e=function(){return e=Object.assign||function(n){for(var t,e=1,o=arguments.length;e<o;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(n[a]=t[a]);return n},e.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var o=function(n,t,e,o,a){return(n-t)*(a-o)/(e-t)+o},a=function(n,t){var e=n+t;return e>360?e-360:e},r=function(){return Math.random()>.5},c=function(n,t){return void 0===t&&(t=2),Math.round(n*Math.pow(10,t))/Math.pow(10,t)},i=[0,0,1],s=[[1,1,0],[1,0,1],[0,1,1],[1,0,0],[0,1,0],i],l=function(n,t,e,l,u,f){var d=Math.round(600*Math.random()+200),p=Math.round(Math.random()*(s.length-1)),m=e-Math.round(1e3*Math.random()),h=Math.random()<.1,v=function(n){return!s[n].every((function(n,t){return n===i[t]}))&&r()}(p),y=h?c(.25*Math.random(),2):0,g=-1*y,b=y,M=c(Math.abs(o(Math.abs(a(t.degree,90)-180),0,180,-1,1)),4),w=c(.5*Math.random(),4),C=c(Math.random()*l*(r()?1:-1),4),x=c(Math.max(o(Math.abs(t.degree-180),0,180,l,-l),0),4),E="confetti-particle-".concat(f);return{className:E,style:"\n      .".concat(n," .").concat(E," {\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(E," > div {\n        width: ").concat(v?u:Math.round(4*Math.random())+u/2,"px;\n        height: ").concat(v?u:Math.round(2*Math.random())+u,"px;\n        animation: y-axis ").concat(m,"ms forwards cubic-bezier(").concat(w,", ").concat(C,", ").concat(.5,", ").concat(x,");\n      }\n      .").concat(n," .").concat(E," > 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    ")}},u=function(n){var t=n.particles,e=n.duration,r=n.height,c=n.width,i=n.force,u=n.particleSize,f=Math.random().toString(36).substring(2,8),d="confetti-".concat(f,"-container"),p="confetti-".concat(f,"-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=s.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"),c=n.map((function(n,t){var r=o(Math.abs(a(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(c,"\n  ")}(t.map((function(n){return n.degree})),r,c),y=t.map((function(n,t){return l(p,n,e,i,u,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}},f=["#FFC700","#FF0000","#2E3191","#41BBC7"],d=function(n,t){var e,o=360/n;return(e=n,Array.from({length:e},(function(n,t){return t}))).map((function(n){return{color:t[n%t.length],degree:o*n}}))},p=function(o){var a,r=o.particleCount,c=void 0===r?100:r,i=o.duration,s=void 0===i?2200:i,l=o.colors,p=void 0===l?f:l,m=o.particleSize,h=void 0===m?12:m,v=o.force,y=void 0===v?.5:v,g=o.height,b=void 0===g?"120vh":g,M=o.width,w=void 0===M?1e3:M,C=o.portal,x=void 0===C||C,E=o.zIndex,O=o.onComplete,j=function(n,t){var e={};for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&t.indexOf(o)<0&&(e[o]=n[o]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(n);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(n,o[a])&&(e[o[a]]=n[o[a]])}return e}(o,["particleCount","duration","colors","particleSize","force","height","width","portal","zIndex","onComplete"]),S=n.useState(),z=S[0],k=S[1],F=d(c,p),I=function(n){var t=u(n);return{containerClass:t.containerClass,screenClass:t.screenClass,particleClasses:t.particleClasses,styles:t.styles}}({particles:F,duration:s,height:b,width:w,force:y,particleSize:h}),N=I.containerClass,P=I.screenClass,B=I.particleClasses,T=I.styles,_=n.useCallback((function(n){if(n){var t=n.getBoundingClientRect(),e=t.top,o=t.left;k({top:e,left:o})}}),[]);return n.useEffect((function(){if("function"==typeof O){var n=setTimeout(O,s);return function(){return clearTimeout(n)}}}),[s,O]),n.createElement("div",e({ref:_,className:N},j),n.createElement("style",{dangerouslySetInnerHTML:{__html:T}}),z&&n.createElement(n.Fragment,null,(a=n.createElement("div",e({"data-slot":"confetti-explosion-screen",className:P},E?{style:{zIndex:E}}:null),n.createElement("div",{style:{position:"absolute",top:z.top,left:z.left}},F.map((function(t,e){return n.createElement("div",{className:B[e],key:t.degree},n.createElement("div",null))})))),x?t(a,document.body):a)))},m=function(t){return"undefined"==typeof window||void 0===window.location?null:n.createElement(p,e({},t))};export{m as ConfettiExplosion,m as default};
//# sourceMappingURL=index.esm.js.map