@neoconfetti/react - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/index.js

 import { useRef, useEffect, createElement } from 'react';
 
 // ../core/dist/index.js
-var style_module_default = '@keyframes mz3PUW_ya{to{translate:0 var(--sh)}}@keyframes mz3PUW_xa{to{translate:var(--xlp)0}}@keyframes mz3PUW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.mz3PUW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.mz3PUW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:mz3PUW_xa}.mz3PUW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:mz3PUW_ya;position:absolute;top:0;left:0}.mz3PUW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:mz3PUW_r;display:block}';
-var c = "mz3PUW_c";
-var p = "mz3PUW_p";
+var style_module_default = '@keyframes Bc2PgW_ya{to{translate:0 var(--sh)}}@keyframes Bc2PgW_xa{to{translate:var(--xlp)0}}@keyframes Bc2PgW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.Bc2PgW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.Bc2PgW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:Bc2PgW_xa}.Bc2PgW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:Bc2PgW_ya;position:absolute;top:0;left:0}.Bc2PgW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:Bc2PgW_r;display:block}';
+var p = "Bc2PgW_p";
+var c = "Bc2PgW_c";
 var DEFAULT_COLORS = ["#FFC700", "#FF0000", "#2E3191", "#41BBC7"];
@@ -8,0 +8,0 @@ var DEFAULT_DURATION = 3500;

dist/min/index.js

@@ -1,1 +0,1 @@
-import{useRef as e,useEffect as t,createElement as r}from"react";var a='@keyframes mz3PUW_ya{to{translate:0 var(--sh)}}@keyframes mz3PUW_xa{to{translate:var(--xlp)0}}@keyframes mz3PUW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.mz3PUW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.mz3PUW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:mz3PUW_xa}.mz3PUW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:mz3PUW_ya;position:absolute;top:0;left:0}.mz3PUW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:mz3PUW_r;display:block}',o="mz3PUW_c",n="mz3PUW_p",i=["#FFC700","#FF0000","#2E3191","#41BBC7"],s=3500,c=.5,l=150,d="mix",m=12,p="",u=!0,y=800,f=1600;function h(e,t={}){let{colors:r=i,duration:h=s,force:F=c,particleCount:O=l,particleShape:j=d,particleSize:E=m,particleClass:$=p,destroyAfterDone:q=u,stageHeight:B=y,stageWidth:D=f}=t;!function(e){if(document.querySelector("style[data-neoconfetti]"))return;const t=S("style");t.dataset.neoconfetti="",t.textContent=e,w(document.head,t)}(a),e.classList.add(o),e.style.setProperty("--sh",B+"px");let J=[],I=[];const G=()=>U(W()*(A-1)),K=(e,t)=>"rectangles"!==j&&("circles"===e||H(t));function Q(e,t){const r=G(),a=K(j,r),o=(t,r)=>e.style.setProperty(t,r+"");o("--xlp",M(z(T(t,90)-180),0,180,-D/2,D/2)+"px"),o("--dc",h-U(1e3*W())+"ms");const n=W()<x?L(W()*b,2):0;o("--x1",n),o("--x2",-1*n),o("--x3",n),o("--x4",L(z(M(z(T(t,90)-180),0,180,-1,1)),4)),o("--y1",L(W()*P,4)),o("--y2",L(W()*F*(N()?1:-1),4)),o("--y3",P),o("--y4",L(_(M(z(t-180),0,180,F,-F),0),4)),o("--w",(a?E:U(4*W())+E/2)+"px"),o("--h",(a?E:U(2*W())+E)+"px");const i=r.toString(2).padStart(3,"0").split("");o("--hr",i.map((e=>+e/2+"")).join(" ")),o("--r",i.join(" ")),o("--rd",L(W()*(g-v)+v)+"ms"),o("--br",a?"50%":0)}let R;function V(){e.innerHTML="",clearTimeout(R),J=C(O,r),I=function(e,t=[],r){const a=[];for(const{color:o}of t){const t=S("div");t.className=`${n} ${r}`,t.style.setProperty("--bgc",o);const i=S("div");w(t,i),w(e,t),a.push(t)}return a}(e,J,$);for(const[e,t]of k(I))Q(t,J[+e].degree);R=setTimeout((()=>{q&&(e.innerHTML="")}),h)}return V(),{update(t){const a=t.particleCount??l,o=t.particleShape??d,v=t.particleSize??m,g=t.particleClass??p,x=t.colors??i,b=t.stageHeight??y,P=t.duration??s,z=t.force??c,W=t.stageWidth??f,U=t.destroyAfterDone??u;J=C(a,x);let _=!1;if(a===O){I=Array.from(e.querySelectorAll(`.${n}`));for(const[e,{color:t}]of k(J)){const a=I[+e];JSON.stringify(r)!==JSON.stringify(x)&&a.style.setProperty("--bgc",t),o!==j&&a.style.setProperty("--br",K(o,G())?"50%":"0"),g!==$&&($&&a.classList.remove($),g&&a.classList.add(g))}}else _=!0;q&&!U&&clearTimeout(R),e.style.setProperty("--sh",b+"px"),h=P,r=x,F=z,O=a,j=o,E=v,$=g,q=U,B=b,D=W,_&&V()},destroy(){e.innerHTML="",clearTimeout(R)}}}var v=200,g=800,x=.1,b=.3,P=.5,z=Math.abs,W=Math.random,U=Math.round,_=Math.max,S=e=>document.createElement(e),w=(e,t)=>e.appendChild(t),C=(e,t)=>Array.from({length:e},((r,a)=>({color:t[a%t.length],degree:360*a/e}))),L=(e,t=2)=>U((e+Number.EPSILON)*10**t)/10**t,M=(e,t,r,a,o)=>(e-t)*(o-a)/(r-t)+a,T=(e,t)=>e+t>360?e+t-360:e+t,N=()=>W()>.5,k=Object.entries,A=6,H=e=>1!==e&&N();function F({class:a,...o}){const n=e(null),i=e();return t((()=>{if("undefined"!=typeof window&&n.current){if(i.current)return i.current.update(o),i.current.destroy;i.current=h(n.current,o)}}),[o]),r("div",{ref:n,className:a})}export{F as Confetti};
+import{useRef as e,useEffect as t,createElement as r}from"react";var a='@keyframes Bc2PgW_ya{to{translate:0 var(--sh)}}@keyframes Bc2PgW_xa{to{translate:var(--xlp)0}}@keyframes Bc2PgW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.Bc2PgW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.Bc2PgW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:Bc2PgW_xa}.Bc2PgW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:Bc2PgW_ya;position:absolute;top:0;left:0}.Bc2PgW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:Bc2PgW_r;display:block}',o="Bc2PgW_p",n="Bc2PgW_c",i=["#FFC700","#FF0000","#2E3191","#41BBC7"],c=3500,s=.5,l=150,d="mix",p=12,u="",y=!0,f=800,g=1600;function m(e,t={}){let{colors:r=i,duration:m=c,force:F=s,particleCount:O=l,particleShape:j=d,particleSize:E=p,particleClass:$=u,destroyAfterDone:q=y,stageHeight:D=f,stageWidth:J=g}=t;!function(e){if(document.querySelector("style[data-neoconfetti]"))return;const t=w("style");t.dataset.neoconfetti="",t.textContent=e,C(document.head,t)}(a),e.classList.add(n),e.style.setProperty("--sh",D+"px");let I=[],G=[];const K=()=>_(W()*(A-1)),Q=(e,t)=>"rectangles"!==j&&("circles"===e||H(t));function R(e,t){const r=K(),a=Q(j,r),o=(t,r)=>e.style.setProperty(t,r+"");o("--xlp",T(B(N(t,90)-180),0,180,-J/2,J/2)+"px"),o("--dc",m-_(1e3*W())+"ms");const n=W()<x?M(W()*b,2):0;o("--x1",n),o("--x2",-1*n),o("--x3",n),o("--x4",M(B(T(B(N(t,90)-180),0,180,-1,1)),4)),o("--y1",M(W()*P,4)),o("--y2",M(W()*F*(k()?1:-1),4)),o("--y3",P),o("--y4",M(S(T(B(t-180),0,180,F,-F),0),4)),o("--w",(a?E:_(4*W())+E/2)+"px"),o("--h",(a?E:_(2*W())+E)+"px");const i=r.toString(2).padStart(3,"0").split("");o("--hr",i.map((e=>+e/2+"")).join(" ")),o("--r",i.join(" ")),o("--rd",M(W()*(v-h)+h)+"ms"),o("--br",a?"50%":0)}let U;function V(){e.innerHTML="",clearTimeout(U),I=L(O,r),G=function(e,t=[],r){const a=[];for(const{color:n}of t){const t=w("div");t.className=`${o} ${r}`,t.style.setProperty("--bgc",n);const i=w("div");C(t,i),C(e,t),a.push(t)}return a}(e,I,$);for(const[e,t]of z(G))R(t,I[+e].degree);U=setTimeout((()=>{q&&(e.innerHTML="")}),m)}return V(),{update(t){const a=t.particleCount??l,n=t.particleShape??d,h=t.particleSize??p,v=t.particleClass??u,x=t.colors??i,b=t.stageHeight??f,P=t.duration??c,B=t.force??s,W=t.stageWidth??g,_=t.destroyAfterDone??y;I=L(a,x);let S=!1;if(a===O){G=Array.from(e.querySelectorAll(`.${o}`));for(const[e,{color:t}]of z(I)){const a=G[+e];JSON.stringify(r)!==JSON.stringify(x)&&a.style.setProperty("--bgc",t),n!==j&&a.style.setProperty("--br",Q(n,K())?"50%":"0"),v!==$&&($&&a.classList.remove($),v&&a.classList.add(v))}}else S=!0;q&&!_&&clearTimeout(U),e.style.setProperty("--sh",b+"px"),m=P,r=x,F=B,O=a,j=n,E=h,$=v,q=_,D=b,J=W,S&&V()},destroy(){e.innerHTML="",clearTimeout(U)}}}var h=200,v=800,x=.1,b=.3,P=.5,B=Math.abs,W=Math.random,_=Math.round,S=Math.max,w=e=>document.createElement(e),C=(e,t)=>e.appendChild(t),L=(e,t)=>Array.from({length:e},((r,a)=>({color:t[a%t.length],degree:360*a/e}))),M=(e,t=2)=>_((e+Number.EPSILON)*10**t)/10**t,T=(e,t,r,a,o)=>(e-t)*(o-a)/(r-t)+a,N=(e,t)=>e+t>360?e+t-360:e+t,k=()=>W()>.5,z=Object.entries,A=6,H=e=>1!==e&&k();function F({class:a,...o}){const n=e(null),i=e();return t((()=>{if("undefined"!=typeof window&&n.current){if(i.current)return i.current.update(o),i.current.destroy;i.current=m(n.current,o)}}),[o]),r("div",{ref:n,className:a})}export{F as Confetti};

package.json

 {
   "name": "@neoconfetti/react",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Confetti explosion in React 🎉🎊",
@@ -5,0 +5,0 @@ "author": "Puru Vijay",

README.md

 # @neoconfetti/react
 
-Let's party 🎊🎊 with React! `@neoconfetti/svelte` allows you to show an awesome confetti explosion on your page, with React/Preact/Million!
+Let's party 🎊🎊 with React! `@neoconfetti/react` allows you to show an awesome confetti explosion on your page, with React/Preact/Million!
 
@@ -5,0 +5,0 @@ ## Features

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

Number of downloads

520

increased by22.93%

Worsened metrics

Total package byte prevSize

21202

No dependency changes