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

Interactive cursor effects for React and Next.js applications

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