react-awesome-cursor
Version:
Most good and awesome cursor with many effect
3 lines (2 loc) • 4.64 kB
JavaScript
;function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("gsap"),n=e(t),o=require("react"),r=e(o);function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}exports.default=function(e){var u=e.backgroundColor,i=void 0===u?"#000":u,c=e.initialSize,d=void 0===c?12:c,s=e.animationDuration,l=void 0===s?1.5:s,f=e.magneticAmount,m=void 0===f?.9:f,v=e.className,g=e.cursorAnimationDuration,E=void 0===g?.7:g,h=e.enableSpecialElementScale,x=void 0===h||h,p=o.useRef(null),L={duration:E,x:0,y:0,scale:1,opacity:1,width:d,height:d,background:i,mixBlendMode:"inherit",overwrite:!0,ease:t.Expo.easeOut,force3D:!0};return o.useEffect((function(){L=a({},L,{width:d,height:d,background:i}),document.body.addEventListener("mouseenter",(function(){L=a({},L,{opacity:1}),n.to("#awesome-cursor",L)})),document.body.addEventListener("mousemove",(function(e){var t=e.target;x?(t instanceof HTMLButtonElement||t instanceof HTMLAnchorElement||t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLImageElement)&&(L=a({},L,{scale:.8})):L=a({},L,{scale:1}),L=a({},L,{x:e.clientX,y:e.clientY}),n.to("#awesome-cursor",L)})),document.body.addEventListener("mouseleave",(function(){L=a({},L,{opacity:0}),n.to("#awesome-cursor",L)}))})),o.useEffect((function(){!function(){var e,o,r,u,c,s;L=a({},L,{width:d,height:d,background:i});var f=null!=(e=document.querySelectorAll("[data-cursor-size]"))?e:[],v=null!=(o=document.querySelectorAll("[data-cursor-text]"))?o:[],g=null!=(r=document.querySelectorAll("[data-cursor-color]"))?r:[],h=null!=(u=document.querySelectorAll("[data-cursor-magnetic]"))?u:[],x=null!=(c=document.querySelectorAll("[data-cursor-exclusion]"))?c:[],b=null!=(s=document.querySelectorAll("[data-cursor-image]"))?s:[];f.forEach((function(e){e.addEventListener("mouseenter",(function(e){var t=parseInt(e.target.dataset.cursorSize);L=a({},L,{width:t,height:t,top:-t/2,left:-t/2,duration:l})})),e.addEventListener("mousemove",(function(e){var t=parseInt(e.target.dataset.cursorSize);L=a({},L,{width:t,height:t,top:-t/2,left:-t/2,duration:l})})),e.addEventListener("mouseleave",(function(){L=a({},L,{width:d,height:d,left:0,top:0,duration:E})}))})),v.forEach((function(e){e.addEventListener("mouseenter",(function(e){var t=e.target,n=t.dataset.cursorText,o=t.dataset.cursorTextColor;p.current&&n&&(p.current.textContent=n),L=a({},L,{color:o,duration:l})})),e.addEventListener("mousemove",(function(e){var t=e.target,n=t.dataset.cursorText,o=t.dataset.cursorTextColor;p.current&&n&&(p.current.textContent=n),L=a({},L,{color:o,duration:l})})),e.addEventListener("mouseleave",(function(){L=a({},L,{duration:E}),p.current&&(p.current.textContent="")}))})),g.forEach((function(e){e.addEventListener("mouseenter",(function(e){L=a({},L,{background:e.target.dataset.cursorColor,duration:l})})),e.addEventListener("mousemove",(function(e){L=a({},L,{background:e.target.dataset.cursorColor,duration:l})})),e.addEventListener("mouseleave",(function(){L=a({},L,{background:i,duration:E})}))})),x.forEach((function(e){e.addEventListener("mouseenter",(function(e){var t,n=null!=(t=e.target.dataset.cursorExclusionColor)?t:"#fff";L=a({},L,{mixBlendMode:"exclusion",background:n,duration:l})})),e.addEventListener("mousemove",(function(e){var t,n=null!=(t=e.target.dataset.cursorExclusionColor)?t:"#fff";L=a({},L,{mixBlendMode:"exclusion",background:n,duration:l})})),e.addEventListener("mouseleave",(function(){L=a({},L,{mixBlendMode:"inherit",background:i,duration:E})}))})),b.forEach((function(e){e.addEventListener("mouseenter",(function(e){L=a({},L,{background:'url("'+e.target.dataset.cursorImage+'")',duration:l})})),e.addEventListener("mousemove",(function(e){L=a({},L,{background:'url("'+e.target.dataset.cursorImage+'")',duration:l})})),e.addEventListener("mouseleave",(function(){L=a({},L,{background:i,duration:E})}))})),h.forEach((function(e){e.addEventListener("mousemove",(function(e){var o=e.currentTarget;n.to(o,{x:(e.clientX-(o.offsetLeft-window.pageXOffset)-o.clientWidth/2)*m,y:(e.clientY-(o.offsetTop-window.pageYOffset)-o.clientHeight/2)*m,duration:l,ease:t.Expo.easeOut,force3D:!0})})),e.addEventListener("mouseleave",(function(e){n.to(e.currentTarget,{x:0,y:0,duration:l,ease:t.Expo.easeOut})}))}))}()})),r.createElement("div",{id:"awesome-cursor",className:"awesome-cursor "+v,ref:p})};
//# sourceMappingURL=react-awesome-cursor.cjs.production.min.js.map