react-svg-cursor
Version:
Use any SVG or Image as your custom cursor
3 lines (2 loc) • 1.81 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);!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}");exports.CustomCursor=function(t){var r=t.component,o=t.width,c=void 0===o?20:o,i=t.height,l=void 0===i?20:i,a=t.transform,s=void 0===a?"none":a,u=t.zIndex,d=void 0===u?999:u,f=t.isDisabled,m=void 0!==f&&f,p=function(){var t=e.useState({clientX:0,clientY:0}),n=t[0],r=t[1],o=function(e){var t=e.clientX,n=e.clientY;r({clientX:t,clientY:n})};return e.useEffect((function(){return document.addEventListener("mousemove",o,!1),function(){document.removeEventListener("mousemove",o)}}),[]),n}(),v=p.clientX,h=p.clientY,x={left:"".concat(v,"px"),top:"".concat(h,"px"),width:"".concat(c,"px"),height:"".concat(l,"px"),transform:s,zIndex:d};if(!r)return null;var y=r;return n.default.createElement(n.default.Fragment,null,n.default.createElement("style",{jsx:!0,global:!0},"\n * {\n cursor: ".concat(m?"unset":"none !important",";\n }\n ")),!m&&n.default.createElement((function(){return"string"==typeof r?n.default.createElement("img",{src:r,style:x,className:"rsc-cursor"}):n.default.createElement("div",{style:x,className:"rsc-cursor"},"function"==typeof r?n.default.createElement(y,null):r)}),null))};
//# sourceMappingURL=index.js.map