@izhann/react-cursor-fx/dist/index.esm.js

Interactive cursor effects for React and Next.js applications

import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useState as r,useRef as e,useEffect as o,createContext as i,useContext as a,useCallback as u}from"react";import{useMotionValue as l,useSpring as c,motion as s,AnimatePresence as d}from"framer-motion";var f=function(){return f=Object.assign||function(t){for(var n,r=1,e=arguments.length;r<e;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o]);return t},f.apply(this,arguments)};function m(t,n,r){if(r||2===arguments.length)for(var e,o=0,i=n.length;o<i;o++)!e&&o in n||(e||(e=Array.prototype.slice.call(n,0,o)),e[o]=n[o]);return t.concat(e||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var v=function(){var t=r({x:0,y:0}),n=t[0],i=t[1],a=r(!1),u=a[0],l=a[1],c=e(null);return o((function(){l(!0);var t=function(t){null===c.current&&(c.current=requestAnimationFrame((function(){i({x:t.clientX-15,y:t.clientY-15}),c.current=null})))};return window.addEventListener("mousemove",t),function(){window.removeEventListener("mousemove",t),null!==c.current&&cancelAnimationFrame(c.current)}}),[]),u?n:{x:0,y:0}},p={default:{width:24,height:24,scale:1,shape:"circle",color:"rgba(255, 255, 255, 0.8)",opacity:1,borderColor:"rgba(0, 0, 0, 0)",borderWidth:0,borderStyle:"solid",label:"",fontSize:"12px",fontWeight:"bold",labelColor:"#000",transition:{stiffness:800,damping:80,mass:1}}},h=i({cursorState:f(f({},p.default),{variant:"default"}),setCursorVariant:function(){},config:p,mousePosition:{x:0,y:0},resetCursorToDefault:function(){},setGlobalCursorVariant:function(){},clearGlobalCursorVariant:function(){}}),g=function(){return a(h)},b=function(n){var i,a=n.children,u=n.config,l=void 0===u?p:u,c=n.hideNativeCursor,s=void 0===c||c,d=v(),g=r(["default"]),b=g[0],y=g[1],C=e(Date.now()),x=e(null),w=r(null),T=w[0],E=w[1],V=function(){y(["default"])};o((function(){var t=function(t){C.current=Date.now(),x.current&&(clearTimeout(x.current),x.current=null);var n=document.elementFromPoint(t.clientX,t.clientY);n&&(n.hasAttribute("data-cursor-target")||n.closest("[data-cursor-target]"))||"default"===b[b.length-1]||(x.current=setTimeout((function(){var n=document.elementFromPoint(t.clientX,t.clientY);(!n||!n.hasAttribute("data-cursor-target")&&!n.closest("[data-cursor-target]"))&&V()}),0))};return document.addEventListener("mousemove",t,{passive:!0}),function(){document.removeEventListener("mousemove",t),x.current&&clearTimeout(x.current)}}),[b]);var S=null!=T?T:b[b.length-1],L=null!==(i=l[S])&&void 0!==i?i:l.default,P=f(f({},L),{variant:S});return o((function(){if(s){var t=document.createElement("style");return t.textContent='\n        body, a, button, [role="button"], * {\n          cursor: none !important;\n        }\n      ',document.head.appendChild(t),function(){document.head.removeChild(t)}}}),[s]),t(h.Provider,{value:{cursorState:P,setCursorVariant:function(t,n){void 0===n&&(n="push"),x.current&&(clearTimeout(x.current),x.current=null),"reset"===n?y(["default"]):"push"===n?function(t){y((function(n){return m(m([],n,!0),[t],!1)}))}(t):y((function(t){var n=m([],t,!0);return n.pop(),n.length?n:["default"]}))},resetCursorToDefault:V,config:l,mousePosition:d,setGlobalCursorVariant:E,clearGlobalCursorVariant:function(){return E(null)}},children:a})},y=function(i){var a,u,v,p,h=i.size,b=void 0===h?24:h,y=i.zIndex,C=void 0===y?9999:y,x=i.showOnTouch,w=void 0!==x&&x,T=i.trailLength,E=void 0===T?10:T,V=g(),S=V.cursorState,L=V.mousePosition,P=r(!1),A=P[0],G=P[1],z=r(!1),D=z[0],M=z[1],W=e([]),F=l(L.x),j=l(L.y),O={damping:(null===(a=S.transition)||void 0===a?void 0:a.damping)||30,stiffness:(null===(u=S.transition)||void 0===u?void 0:u.stiffness)||300,mass:(null===(v=S.transition)||void 0===v?void 0:v.mass)||1},B=c(F,O),I=c(j,O);if(o((function(){W.current=m([L],W.current.slice(0,E-1),!0),F.set(L.x),j.set(L.y)}),[L,F,j,E]),o((function(){var t;t="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,M(t);var n=setTimeout((function(){G(!0)}),50);return function(){return clearTimeout(n)}}),[]),D&&!w)return null;return t(s.div,{style:{position:"fixed",left:0,top:0,x:B,y:I,zIndex:C,pointerEvents:"none",opacity:A?1:0,willChange:"transform",mixBlendMode:S.mixBlendMode||"normal"},children:n(s.div,{style:{borderStyle:S.borderStyle||"solid",display:"flex",justifyContent:"center",alignItems:"center",transform:"translate(-50%, -50%)",willChange:"transform, width, height, background-color"},animate:{width:S.width||b,height:S.height||b,borderRadius:"circle"===S.shape?"50%":"square"===S.shape&&S.borderRadius||0,backgroundColor:"custom"===S.shape?"rgba(0, 0, 0, 0)":S.color||"rgba(255, 255, 255, 0.8)",opacity:S.opacity||1,borderColor:S.borderColor||"rgba(0, 0, 0, 0)",borderWidth:S.borderWidth||0,scale:void 0!==S.scale?S.scale:1},transition:f({type:"spring"},O),children:["custom"===S.shape&&S.customElement,t(d,{mode:"wait",children:S.label&&t(s.div,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.8},transition:{duration:.15},style:{fontSize:S.fontSize||"12px",fontWeight:S.fontWeight||"bold",color:S.labelColor||"#000",textAlign:"center",userSelect:"none",whiteSpace:"nowrap"},children:S.label},"string"==typeof S.label?S.label:"label")}),null===(p=S.innerElements)||void 0===p?void 0:p.map((function(n,r){var e=n.transition||{stiffness:100,damping:15,mass:3},o=W.current[Math.min(r+1,W.current.length-1)]||L,i=o?L.x-o.x:0,a=o?L.y-o.y:0;return t(s.div,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1,x:.5*-i,y:.5*-a},style:{position:"absolute",left:"50%",top:"50%",transform:"translate(-50%, -50%)"},transition:{type:"spring",damping:e.damping||15,stiffness:e.stiffness||100,mass:e.mass||3},children:n.element},"inner-".concat(r))}))]})})},C=function(t){var n=t.variant,r=t.onEnter,i=t.onLeave,a=g(),u=a.setCursorVariant,l=a.resetCursorToDefault,c=e(null),s=e(!1);o((function(){return function(){c.current&&clearTimeout(c.current)}}),[]);return{onMouseEnter:function(){c.current&&(clearTimeout(c.current),c.current=null),s.current=!0,u(n,"push"),null==r||r()},onMouseLeave:function(t){var n,r;s.current=!1;var e=t.relatedTarget;e&&((null===(n=e.hasAttribute)||void 0===n?void 0:n.call(e,"data-cursor-target"))||(null===(r=e.closest)||void 0===r?void 0:r.call(e,"[data-cursor-target]")))||u("","pop"),c.current=setTimeout((function(){s.current||l()}),0),null==i||i()},onFocus:function(){c.current&&(clearTimeout(c.current),c.current=null),s.current=!0,u(n,"push"),null==r||r()},onBlur:function(){s.current=!1,u("","pop"),c.current=setTimeout((function(){s.current||l()}),0),null==i||i()},"data-cursor-target":!0}},x=function(n){var r=n.children,e=n.variant,o=n.onEnter,i=n.onLeave,a=C({variant:e,onEnter:o,onLeave:i});return t("div",f({},a,{"data-cursor-variant":e,"data-cursor-target":!0,children:r}))},w=function(){var t=g(),n=t.setCursorVariant,r=t.resetCursorToDefault,e=t.setGlobalCursorVariant,o=t.clearGlobalCursorVariant;return{setVariant:u((function(t){n(t,"push")}),[n]),resetVariant:u((function(){r()}),[r]),setGlobalVariant:u((function(t){null==e||e(t)}),[e]),clearGlobalVariant:u((function(){null==o||o()}),[o])}};export{y as Cursor,b as CursorProvider,x as CursorTarget,C as useCursor,w as useCursorVariant,v as useMousePosition};
//# sourceMappingURL=index.esm.js.map