react-svg-cursor
Version:
Use any SVG or Image as your custom cursor
3 lines (2 loc) • 1.63 kB
JavaScript
import e,{useState as t,useEffect as n}from"react";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".rsc-cursor{position:fixed;top:0;left:0;will-change:transform;pointer-events:none}.rsc-cursor svg{width:100%;height:auto}");var r=function(r){var o=r.component,c=r.width,i=void 0===c?20:c,s=r.height,l=void 0===s?20:s,a=r.transform,d=void 0===a?"none":a,u=r.zIndex,m=void 0===u?999:u,f=r.isDisabled,p=void 0!==f&&f,v=function(){var e=t({clientX:0,clientY:0}),r=e[0],o=e[1],c=function(e){var t=e.clientX,n=e.clientY;o({clientX:t,clientY:n})};return n((function(){return document.addEventListener("mousemove",c,!1),function(){document.removeEventListener("mousemove",c)}}),[]),r}(),h=v.clientX,x=v.clientY,g={left:"".concat(h,"px"),top:"".concat(x,"px"),width:"".concat(i,"px"),height:"".concat(l,"px"),transform:d,zIndex:m};if(!o)return null;var y=o;return e.createElement(e.Fragment,null,e.createElement("style",{jsx:!0,global:!0},"\n * {\n cursor: ".concat(p?"unset":"none !important",";\n }\n ")),!p&&e.createElement((function(){return"string"==typeof o?e.createElement("img",{src:o,style:g,className:"rsc-cursor"}):e.createElement("div",{style:g,className:"rsc-cursor"},"function"==typeof o?e.createElement(y,null):o)}),null))};export{r as CustomCursor};
//# sourceMappingURL=index.es.js.map