cursor-style/dist/cjs/index.js

Multiple prebuilt cursor styles to choose from

"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("react-dom");const r=(e,t,n)=>(1-n)*e+n*t,o=(e=0,n)=>{const[o,i]=t.useState(n),c=t.useRef(0),s=t.useRef(n);return t.useEffect((()=>{const t=t=>{s.current={x:t.clientX,y:t.clientY},0===e&&i(s.current)};return window.addEventListener("mousemove",t),()=>{window.removeEventListener("mousemove",t)}}),[e]),t.useEffect((()=>{if(0===e)return;const t=()=>{const n=1-.09*e,l=r(o.x,s.current.x,n),a=r(o.y,s.current.y,n);i({x:l,y:a}),c.current=requestAnimationFrame(t)};return c.current=requestAnimationFrame(t),()=>{cancelAnimationFrame(c.current)}}),[o,e]),{position:o}};function i(e="a, button, input, textarea, [role='button'], [tabindex]:not([tabindex='-1']), .hoverable"){const[n,r]=t.useState(!1);return t.useEffect((()=>{function t(t){const n=document.elementFromPoint(t.clientX,t.clientY);if(!n)return void r(!1);let o=!1;try{o=n.matches(e)}catch{o=!1}r(o)}return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[e]),n}const c={position:"fixed",width:"20px",height:"20px",backgroundColor:"white",borderRadius:"50%",pointerEvents:"none",mixBlendMode:"difference",cursor:"none",transition:"transform 0.2s ease",zIndex:2147483647};let s=[];const l=()=>({triggerClickEffect:t.useCallback(((e,t,n="pulse",r="white",o=1.5,i=300)=>{s.forEach((c=>c({x:e,y:t,type:n,color:r,size:o,duration:i})))}),[]),subscribe:e=>(s.push(e),()=>{s=s.filter((t=>t!==e))})});let a=0,f=!1;const u=()=>{const{subscribe:r}=l(),[o,i]=t.useState([]),[c,s]=t.useState(null);return t.useEffect((()=>{!function(){if(f)return;const e=document.createElement("style");e.textContent="\n    @keyframes cursor-pulse {\n        0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n        100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }\n    }\n    .click-effect-pulse {\n      animation-name: cursor-pulse;\n      animation-timing-function: ease-out;\n      animation-fill-mode: forwards;\n      transform-origin: center center; /* <-- add this */\n    }\n  ",document.head.appendChild(e),f=!0}();let e=document.getElementById("cursor-click-effects");e||(e=document.createElement("div"),e.id="cursor-click-effects",document.body.appendChild(e)),s(e);const t=r((({x:e,y:t,type:n,color:r,size:o,duration:c})=>{const s=a++;i((i=>[...i,{id:s,x:e,y:t,type:n,color:r,size:o,duration:c}])),setTimeout((()=>{i((e=>e.filter((e=>e.id!==s))))}),c)}));return()=>t()}),[r]),c?n.createPortal(e.jsx(e.Fragment,{children:o.map((({id:t,x:n,y:r,type:o,color:i,size:c,duration:s})=>{const l=2*c,a={position:"fixed",left:`${n}px`,top:`${r}px`,width:`${l}px`,height:`${l}px`,transform:"translate(-50%, -50%)",opacity:.5,borderRadius:"50%",backgroundColor:i,pointerEvents:"none",zIndex:2147483647,animationDuration:`${s}ms`,animationName:"cursor-pulse",animationTimingFunction:"ease-out",animationFillMode:"forwards"};return e.jsx("div",{className:`click-effect-${o}`,style:a},t)}))}),c):null};if("undefined"!=typeof window&&!document.getElementById("cursor-click-effects-root")){const t=document.createElement("div");t.id="cursor-click-effects-root",document.body.appendChild(t),import("react-dom/client").then((({createRoot:n})=>{n(t).render(e.jsx(u,{}))}))}const d=({delay:n,size:r=20,bgColor:s="white",useMixBlendDifference:a=!0,scaleOnHover:f=1.5,clickEffect:u,clickEffectColor:d="white",clickEffectSize:m=10,clickEffectDuration:x=300})=>{const p=i(),{position:E}=o(n,{x:0,y:0}),{triggerClickEffect:k}=l();return t.useEffect((()=>{if(!u)return;const e=e=>{k(e.clientX,e.clientY,u,d,m,x)};return window.addEventListener("click",e),()=>window.removeEventListener("click",e)}),[u,d,m,x]),e.jsx("div",{className:"cursor",style:{...c,width:`${r}px`,height:`${r}px`,left:`${E.x}px`,top:`${E.y}px`,backgroundColor:s,mixBlendMode:a?"difference":"normal",transform:`translate(-50%, -50%) scale(${p?f:1})`}})},m=({delay:n,size:r,sizeDot:c=r||10,sizeOutline:s=r||45,bgColorDot:a="white",bgColorOutline:f="white",useMixBlendDifference:u=!0,scaleOnHover:d=1.5,clickEffect:m,clickEffectColor:x=a,clickEffectSize:p=1.5,clickEffectDuration:E=300})=>{const k=t.useRef(null),y=t.useRef(null),{position:v}=o(n,{x:0,y:0}),h=i(),{triggerClickEffect:w}=l();t.useEffect((()=>{const e=e=>{k.current&&(k.current.style.left=`${e.clientX}px`,k.current.style.top=`${e.clientY}px`,k.current.style.transform=`translate(-50%, -50%) scale(${h?d:1})`)};return window.addEventListener("mousemove",e),()=>window.removeEventListener("mousemove",e)}),[h,d]),t.useEffect((()=>{y.current&&(y.current.style.left=`${v.x}px`,y.current.style.top=`${v.y}px`,y.current.style.transform=`translate(-50%, -50%) scale(${h?d:1})`)}),[v,h,d]),t.useEffect((()=>{if(!m)return;const e=e=>{w(e.clientX,e.clientY,m,x,p,E)};return window.addEventListener("click",e),()=>window.removeEventListener("click",e)}),[m,x,p,E]);const g=u?"difference":"normal";return e.jsxs(e.Fragment,{children:[e.jsx("div",{ref:k,className:"cursor",style:{width:`${c}px`,height:`${c}px`,backgroundColor:a,mixBlendMode:g,zIndex:9999,borderRadius:"50%",transition:"transform 0.2s ease",position:"fixed",pointerEvents:"none"}}),e.jsx("div",{ref:y,className:"cursor",style:{width:`${s}px`,height:`${s}px`,border:`2px solid ${f}`,backgroundColor:"transparent",mixBlendMode:g,zIndex:9998,borderRadius:"50%",transition:"transform 0.2s ease",position:"fixed",pointerEvents:"none"}})]})},x=({delay:n,size:r=35,bgColor:s="white",useMixBlendDifference:a=!0,scaleOnHover:f=1.5,clickEffect:u,clickEffectColor:d="white",clickEffectDuration:m=300,clickEffectSize:x=1.5})=>{const{position:p}=o(n,{x:0,y:0}),E=i(),{triggerClickEffect:k}=l();return t.useEffect((()=>{if(!u)return;const e=e=>{k(e.clientX,e.clientY,u,d,x,m)};return window.addEventListener("click",e),()=>window.removeEventListener("click",e)}),[u,d,x,m]),e.jsx("div",{className:"cursor",style:{...c,left:`${p.x}px`,top:`${p.y}px`,border:`2px solid ${s}`,transform:`translate(-50%, -50%) scale(${E?f:1})`,width:`${r}px`,height:`${r}px`,mixBlendMode:a?"difference":"normal",backgroundColor:"transparent"}})};exports.CursorOne=d,exports.CursorThree=x,exports.CursorTwo=m,exports.CustomCursor=({type:t,delay:n=0,size:r,sizeDot:o,sizeOutline:i,bgColor:c,bgColorDot:s,bgColorOutline:l,useMixBlendDifference:a,scaleOnHover:f,clickEffect:u,clickEffectColor:p,clickEffectSize:E,clickEffectDuration:k})=>{const y=Math.max(0,Math.min(n,1e3));switch(t){case"one":return e.jsx(d,{delay:y,size:r,bgColor:c,useMixBlendDifference:a,scaleOnHover:f,clickEffect:u,clickEffectColor:p,clickEffectSize:E,clickEffectDuration:k});case"two":return e.jsx(m,{delay:y,sizeDot:o,sizeOutline:i,bgColorDot:s,bgColorOutline:l,useMixBlendDifference:a,scaleOnHover:f,clickEffect:u,clickEffectColor:p,clickEffectSize:E,clickEffectDuration:k});case"three":return e.jsx(x,{delay:y,size:r,bgColor:c,useMixBlendDifference:a,scaleOnHover:f,clickEffect:u,clickEffectColor:p,clickEffectSize:E,clickEffectDuration:k});default:return null}};
//# sourceMappingURL=index.js.map