Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@neoconfetti/react

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@neoconfetti/react - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

2

dist/index.js

@@ -36,3 +36,3 @@ import { useRef, useEffect, createElement } from 'react';

const calc_rotation_transform = () => math_round(random() * (POSSIBLE_ROTATION_TRANSFORMS - 1));
const get_is_circle = (particle_shape, rotation_transform) => particle_shape === "circles" || should_be_circle(rotation_transform);
const get_is_circle = (particle_shape, rotation_transform) => particleShape !== "rectangles" && (particle_shape === "circles" || should_be_circle(rotation_transform));
function confetti_styles(node, degree) {

@@ -39,0 +39,0 @@ const rotation_transform = calc_rotation_transform();

@@ -1,1 +0,1 @@

import{useRef as t,useEffect as e,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(t,e={}){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}=e;!function(t){if(document.querySelector("style[data-neoconfetti]"))return;const e=S("style");e.dataset.neoconfetti="",e.textContent=t,w(document.head,e)}(a),t.classList.add(o),t.style.setProperty("--sh",B+"px");let J=[],I=[];const G=()=>U(W()*(A-1)),K=(t,e)=>"circles"===t||H(e);function Q(t,e){const r=G(),a=K(j,r),o=(e,r)=>t.style.setProperty(e,r+"");o("--xlp",M(z(T(e,90)-180),0,180,-D/2,D/2)+"px"),o("--dc",h-U(1e3*W())+"ms");const n=W()<g?L(W()*b,2):0;o("--x1",n),o("--x2",-1*n),o("--x3",n),o("--x4",L(z(M(z(T(e,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(e-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((t=>+t/2+"")).join(" ")),o("--r",i.join(" ")),o("--rd",L(W()*(x-v)+v)+"ms"),o("--br",a?"50%":0)}let R;function V(){t.innerHTML="",clearTimeout(R),J=C(O,r),I=function(t,e=[],r){const a=[];for(const{color:o}of e){const e=S("div");e.className=`${n} ${r}`,e.style.setProperty("--bgc",o);const i=S("div");w(e,i),w(t,e),a.push(e)}return a}(t,J,$);for(const[t,e]of k(I))Q(e,J[+t].degree);R=setTimeout((()=>{q&&(t.innerHTML="")}),h)}return V(),{update(e){const a=e.particleCount??l,o=e.particleShape??d,v=e.particleSize??m,x=e.particleClass??p,g=e.colors??i,b=e.stageHeight??y,P=e.duration??s,z=e.force??c,W=e.stageWidth??f,U=e.destroyAfterDone??u;J=C(a,g);let _=!1;if(a===O){I=Array.from(t.querySelectorAll(`.${n}`));for(const[t,{color:e}]of k(J)){const a=I[+t];JSON.stringify(r)!==JSON.stringify(g)&&a.style.setProperty("--bgc",e),o!==j&&a.style.setProperty("--br",K(o,G())?"50%":"0"),x!==$&&($&&a.classList.remove($),x&&a.classList.add(x))}}else _=!0;q&&!U&&clearTimeout(R),t.style.setProperty("--sh",b+"px"),h=P,r=g,F=z,O=a,j=o,E=v,$=x,q=U,B=b,D=W,_&&V()},destroy(){t.innerHTML="",clearTimeout(R)}}}var v=200,x=800,g=.1,b=.3,P=.5,z=Math.abs,W=Math.random,U=Math.round,_=Math.max,S=t=>document.createElement(t),w=(t,e)=>t.appendChild(e),C=(t,e)=>Array.from({length:t},((r,a)=>({color:e[a%e.length],degree:360*a/t}))),L=(t,e=2)=>U((t+Number.EPSILON)*10**e)/10**e,M=(t,e,r,a,o)=>(t-e)*(o-a)/(r-e)+a,T=(t,e)=>t+e>360?t+e-360:t+e,N=()=>W()>.5,k=Object.entries,A=6,H=t=>1!==t&&N();function F({class:a,...o}){const n=t(null),i=t();return e((()=>{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 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};
{
"name": "@neoconfetti/react",
"version": "0.1.0",
"version": "0.1.1",
"description": "Confetti explosion in React 🎉🎊",

@@ -50,3 +50,3 @@ "author": "Puru Vijay",

"devDependencies": {
"@neoconfetti/core": "2.2.0"
"@neoconfetti/core": "2.2.1"
},

@@ -53,0 +53,0 @@ "scripts": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc