react-rewards-using-selector/dist/react-rewards-using-selector.js

This package lets you easily add micro-interactions to your app and reward users with the rain of confetti, emoji or balloons.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var $=require("react");const x=({root:e,particles:n,decay:i,rotate:l,lifetime:a,fps:o,updateParticle:s,onFinish:r})=>{const t=a;let c=0,p=0;const C=1e3/o,y=h=>{p||(p=h);const m=h-p;if(m>=C&&(p=h-m%C,n.forEach(d=>s(d,c/t,i,l)),c+=1,c>=t)){n.forEach(d=>{d.element.parentNode===e&&e.removeChild(d.element)}),r();return}window.requestAnimationFrame(y)};window.requestAnimationFrame(y)},{PI:M}=Math,F=e=>e*(M/180),b=(e,n)=>{const i=Math.ceil(e),l=Math.floor(n);return Math.floor(Math.random()*(l-i))+i},w=(e,n,i,l)=>{const a=F(e),o=F(n),{random:s}=Math;return{x:0,y:0,z:0,height:0,wobble:s()*10,velocity:i*.5+s()*i,angle2D:-a+(.5*o-s()*o),angle3D:-(M/4)+s()*(M/2),tiltAngle:s()*M,differentiator:l}},H=["#A45BF1","#25C6F6","#72F753","#F76C88","#F5F770"],A=[-.6,-.3,0,.3,.6],j=(e,n,i,l,a,o)=>Array.from({length:n}).map((s,r)=>{const t=document.createElement("span");return t.style.backgroundColor=o[r%o.length],t.style.width=`${i}px`,t.style.height=`${i}px`,t.style.position=a,t.style.zIndex=`${l}`,e.appendChild(t),{element:t,differentiator:b(0,A.length)}}),D=(e,n,i)=>{const{x:l,y:a,tiltAngle:o,wobble:s,angle2D:r,angle3D:t,velocity:c,differentiator:p}=e.physics;e.physics.x+=Math.cos(r)*c,e.physics.y+=Math.sin(r)*c,e.physics.z+=Math.sin(t)*c,e.physics.wobble+=.05,e.physics.velocity*=i,e.physics.y+=3.5,e.physics.tiltAngle+=.15;const C=l+(A[p]*n*s*s+20*(p%2?Math.sin(s/4):Math.cos(s/4))),y=a+5*Math.sin(s);e.element.style.transform=`translate3d(${C}px, ${y}px, 0) rotate3d(1, 1, 1, ${p%2?o:-1*o}rad)`,e.element.style.scale=`${1-.2*n}`,n>.5&&(e.element.style.opacity=`${2-2*n}`)},v=(e,n,i)=>{const l=i||{},{elementCount:a=50,elementSize:o=8,colors:s=H,angle:r=90,spread:t=45,decay:c=.94,lifetime:p=200,startVelocity:C=35,zIndex:y=0,position:h="fixed",fps:m=60,onAnimationComplete:d}=l,f=j(e,a,o,y,h,s).map(({element:u,differentiator:g})=>({element:u,physics:w(r,t,C,g)}));x({root:e,particles:f,decay:c,lifetime:p,fps:m,updateParticle:D,onFinish:()=>{typeof d=="function"&&d(),n()}})},S=["\u{1F913}","\u{1F60A}","\u{1F973}"],z=[-.6,-.3,0,.3,.6],Z=(e,n,i,l,a,o)=>Array.from({length:n}).map((s,r)=>{const t=document.createElement("span");return t.innerHTML=o[r%o.length],t.style.fontSize=`${i+b(0,4)}px`,t.style.position=a,t.style.zIndex=`${l}`,e.appendChild(t),{element:t,differentiator:b(0,z.length)}}),q=(e,n,i,l)=>{const{x:a,y:o,tiltAngle:s,angle2D:r,velocity:t,differentiator:c,wobble:p}=e.physics;e.physics.x+=Math.cos(r)*t,e.physics.y+=Math.sin(r)*t,e.physics.wobble+=0,e.physics.velocity*=i,e.physics.y+=5,e.physics.tiltAngle+=.05;const C=`translate3d(${a+(z[c]*n*p*p+20*Math.sin(p/4))}px, ${o}px, 0)`,y=l?`rotate3d(0, 0, 1, ${c%2?s:-1*s}rad)`:"";e.element.style.transform=[C,y].filter(Boolean).join(" "),n>.5&&(e.element.style.opacity=`${2-2*n}`)},k=(e,n,i)=>{const l=i||{},{elementCount:a=20,elementSize:o=25,emoji:s=S,angle:r=90,spread:t=45,decay:c=.94,lifetime:p=200,startVelocity:C=35,zIndex:y=0,position:h="fixed",rotate:m=!0,fps:d=60,onAnimationComplete:f}=l,u=Z(e,a,o,y,h,s).map(({element:g,differentiator:P})=>({element:g,physics:w(r,t,C,P)}));x({root:e,particles:u,decay:c,rotate:m,lifetime:p,fps:d,updateParticle:q,onFinish:()=>{typeof f=="function"&&f(),n()}})};var B=`<svg width="100%" viewBox="0 0 976 3040" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M489.693 1269.49C489.773 1378.79 410.493 1466.8 389.107 1571.11C384.147 1595.33 382.893 1620.12 386.187 1644.64C389.44 1668.83 399.28 1691.16 409.04 1713.29C419.253 1736.44 429.28 1760.11 429.453 1785.83C429.64 1812.27 416.307 1836.8 408.933 1861.59C396 1905.15 409.613 1948.88 425.213 1989.73C442.04 2033.83 461.387 2077.87 456.6 2126.17C453.92 2153.15 444.147 2179.13 434.2 2204.13C424.173 2229.35 413.72 2254.28 405.507 2280.17C389.213 2331.51 379.493 2385.83 378.267 2439.72C377.693 2464.89 380.333 2490.25 388.667 2514.11C397.053 2538.09 412.6 2558.75 424.733 2580.84C449.907 2626.64 458.453 2681 451.053 2732.52C443.853 2782.56 414.227 2825.99 408.893 2876.35C404.44 2918.39 416.733 2961.63 440.08 2996.53C450.373 3011.91 463.267 3025.44 477.867 3036.75C480.773 3039 484.88 3034.95 481.947 3032.68C446.147 3004.96 423.24 2964.2 415.907 2919.71C412.107 2896.61 413.627 2872.95 419.427 2850.35C426.053 2824.51 438.067 2800.36 446.667 2775.17C462.44 2729 463.147 2678.51 450.92 2631.45C444.733 2607.64 434.453 2585.4 421.893 2564.32C407.933 2540.91 394.307 2518.68 388.32 2491.71C382.493 2465.45 383.413 2438 385.56 2411.37C387.853 2382.85 392.467 2354.56 398.827 2326.67C405 2299.61 413.253 2273.05 423.107 2247.12C432.533 2222.27 443.533 2198.05 451.867 2172.8C459.707 2149.04 464.387 2124.29 463 2099.23C461.773 2077.19 455.64 2055.65 448.467 2034.89C433.587 1991.8 411.307 1949.77 409.413 1903.37C408.36 1877.76 417.12 1854.67 425.587 1830.97C433.68 1808.33 437.44 1786.41 432.787 1762.6C428.307 1739.63 417.333 1718.23 408.12 1696.91C397.267 1671.77 390.413 1646.41 390.013 1618.89C388.387 1509.52 469.707 1420.85 490.813 1316.72C493.973 1301.19 495.467 1285.33 495.453 1269.49C495.453 1265.77 489.693 1265.77 489.693 1269.49" stroke="#7A7E82" stroke-width="4"/>
<path d="M555.653 1298.41H423.52C415.173 1298.41 408.413 1305.17 408.413 1313.52C408.413 1321.85 415.173 1328.63 423.52 1328.63H555.653C564 1328.63 570.76 1321.85 570.76 1313.52C570.76 1305.17 564 1298.41 555.653 1298.41Z" fill="currentColor"/>
<path d="M555.653 1298.41H423.52C415.173 1298.41 408.413 1305.17 408.413 1313.52C408.413 1321.85 415.173 1328.63 423.52 1328.63H555.653C564 1328.63 570.76 1321.85 570.76 1313.52C570.76 1305.17 564 1298.41 555.653 1298.41Z" fill="black" fill-opacity="0.1"/>
<path d="M975.133 528.947C975.133 820.667 756.973 1255.43 487.853 1255.43C218.733 1255.43 0.559814 820.667 0.559814 528.947C0.559814 237.227 218.733 0.733359 487.853 0.733359C756.973 0.733359 975.133 237.227 975.133 528.947Z" fill="currentColor"/>
<path d="M549.04 1298.41C531.293 1285.91 519.893 1269.95 512.587 1254.2C504.387 1255.01 496.147 1255.43 487.853 1255.43C481.04 1255.43 474.28 1255.15 467.546 1254.6C460.226 1270.21 448.867 1286.01 431.253 1298.41H549.04Z" fill="currentColor"/>
<path d="M211.413 569.213C193.787 569.213 175.947 564.4 160.92 555.24C128.133 535.293 108.133 498.56 101.147 460.827C97.0133 438.533 96.9468 415.827 99.1068 393.214C120.627 308.28 168.453 234.48 233.467 183.733C246.947 173.213 261.16 163.693 276.027 155.267C280.347 152.813 284.72 150.467 289.147 148.2C291.707 147.373 294.347 146.92 297.12 146.92C301.347 146.92 305.907 147.974 311.067 150.414C332.773 160.64 334.36 192.213 323.693 213.72C313.04 235.226 294.187 251.8 283.413 273.253C262 315.88 276.48 366.707 287.347 413.147C298.213 459.6 302.427 515.373 267.8 548.187C252.707 562.48 232.227 569.213 211.413 569.213" fill="white" fill-opacity="0.2"/>
<path d="M785.133 110.4C863.72 204.187 911.613 328.747 911.613 465.414C911.613 757.147 693.44 1191.89 424.32 1191.89C350.973 1191.89 281.413 1159.6 219.013 1106.71C296.067 1196.16 388.48 1255.43 487.853 1255.43C756.973 1255.43 975.133 820.667 975.133 528.947C975.133 358.547 900.693 206.987 785.133 110.4Z" fill="black" fill-opacity="0.1"/>
</svg>`;const R=["#A45BF1","#25C6F6","#72F753","#F76C88","#F5F770"],E=[-.6,-.3,0,.3,.6],L=(e,n,i)=>{n.parentNode===i&&i.removeChild(n)},T=(e,n,i,l,a,o)=>Array.from({length:n}).map((s,r)=>{const t=document.createElement("span");return t.innerHTML=B,t.style.width=`${i}px`,t.style.position=a,t.style.color=o[r%o.length],t.style.zIndex=`${l}`,t.addEventListener("click",c=>{L(c,t,e)},{once:!0}),e.appendChild(t),{element:t,differentiator:b(0,E.length)}}),V=(e,n,i)=>{const{x:l,y:a,tiltAngle:o,angle2D:s,velocity:r,differentiator:t,wobble:c}=e.physics;e.physics.x+=Math.cos(s)*.5*r,e.physics.y+=Math.sin(s)*.5*r,e.physics.wobble+=0,e.physics.velocity*=i,e.physics.tiltAngle+=.1;const p=l+(E[t]*n*c*c+20*Math.sin(c));e.element.style.transform=`translate3d(${p}px, ${a}px, 0) rotate3d(0, 0, 1, ${t%2?Math.sin(o/4)/3:Math.cos(o/4)/3}rad)`,e.element.style.scale=`${1-.2*n}`,n>.5&&(e.element.style.opacity=`${2-2*n}`)},I=(e,n,i)=>{const l=i||{},{angle:a=90,decay:o=.999,spread:s=50,startVelocity:r=3,elementCount:t=10,elementSize:c=20,lifetime:p=600,zIndex:C=0,position:y="fixed",colors:h=R,fps:m=60,onAnimationComplete:d}=l,f=T(e,t,c,C,y,h).map(({element:u,differentiator:g})=>({element:u,physics:w(a,s,r,g)}));x({root:e,particles:f,decay:o,lifetime:p,fps:m,updateParticle:V,onFinish:()=>{typeof d=="function"&&d(),n()}})},N=(e,n,i)=>{const[l,a]=$.useState(!1),o=()=>{a(!1)};return{reward:$.useCallback(()=>{const s=document.querySelector(e);if(s)switch(a(!0),n){case"confetti":v(s,o,i);break;case"emoji":k(s,o,i);break;case"balloons":I(s,o,i);break;default:console.error(`${n} is not a valid react-rewards type.`)}},[i,e,n]),isAnimating:l}};exports.balloons=I,exports.confetti=v,exports.emoji=k,exports.useReward=N;
//# sourceMappingURL=react-rewards-using-selector.js.map