with-custom-cursor
Version:
A Higher-Order Component (HOC) library for React that enables you to easily add a custom cursor to any component.
320 lines (319 loc) • 10.1 kB
JavaScript
import te, { useRef as ne, useState as oe } from "react";
var w = { exports: {} }, x = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var D;
function ae() {
if (D) return x;
D = 1;
var u = Symbol.for("react.transitional.element"), _ = Symbol.for("react.fragment");
function v(l, n, s) {
var i = null;
if (s !== void 0 && (i = "" + s), n.key !== void 0 && (i = "" + n.key), "key" in n) {
s = {};
for (var E in n)
E !== "key" && (s[E] = n[E]);
} else s = n;
return n = s.ref, {
$$typeof: u,
type: l,
key: i,
ref: n !== void 0 ? n : null,
props: s
};
}
return x.Fragment = _, x.jsx = v, x.jsxs = v, x;
}
var O = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var L;
function se() {
return L || (L = 1, process.env.NODE_ENV !== "production" && function() {
function u(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === K ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case b:
return "Fragment";
case V:
return "Profiler";
case J:
return "StrictMode";
case B:
return "Suspense";
case H:
return "SuspenseList";
case Q:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case k:
return "Portal";
case X:
return (e.displayName || "Context") + ".Provider";
case z:
return (e._context.displayName || "Context") + ".Consumer";
case G:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case Z:
return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
case N:
r = e._payload, e = e._init;
try {
return u(e(r));
} catch {
}
}
return null;
}
function _(e) {
return "" + e;
}
function v(e) {
try {
_(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
o
), _(e);
}
}
function l(e) {
if (e === b) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === N)
return "<...>";
try {
var r = u(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var e = h.A;
return e === null ? null : e.getOwner();
}
function s() {
return Error("react-stack-top-frame");
}
function i(e) {
if (Y.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function E(e, r) {
function t() {
$ || ($ = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function A() {
var e = u(this.type);
return I[e] || (I[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function S(e, r, t, o, m, c, g, y) {
return t = c.ref, e = {
$$typeof: p,
type: e,
key: r,
props: c,
_owner: m
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: A
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: g
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: y
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function f(e, r, t, o, m, c, g, y) {
var a = r.children;
if (a !== void 0)
if (o)
if (ee(a)) {
for (o = 0; o < a.length; o++)
R(a[o]);
Object.freeze && Object.freeze(a);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else R(a);
if (Y.call(r, "key")) {
a = u(e);
var T = Object.keys(r).filter(function(re) {
return re !== "key";
});
o = 0 < T.length ? "{key: someKey, " + T.join(": ..., ") + ": ...}" : "{key: someKey}", W[a + o] || (T = 0 < T.length ? "{" + T.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
o,
a,
T,
a
), W[a + o] = !0);
}
if (a = null, t !== void 0 && (v(t), a = "" + t), i(r) && (v(r.key), a = "" + r.key), "key" in r) {
t = {};
for (var C in r)
C !== "key" && (t[C] = r[C]);
} else t = r;
return a && E(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), S(
e,
a,
c,
m,
n(),
t,
g,
y
);
}
function R(e) {
typeof e == "object" && e !== null && e.$$typeof === p && e._store && (e._store.validated = 1);
}
var d = te, p = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), V = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), X = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), N = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), h = d.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, ee = Array.isArray, P = console.createTask ? console.createTask : function() {
return null;
};
d = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var $, I = {}, M = d["react-stack-bottom-frame"].bind(
d,
s
)(), F = P(l(s)), W = {};
O.Fragment = b, O.jsx = function(e, r, t, o, m) {
var c = 1e4 > h.recentlyCreatedOwnerStacks++;
return f(
e,
r,
t,
!1,
o,
m,
c ? Error("react-stack-top-frame") : M,
c ? P(l(e)) : F
);
}, O.jsxs = function(e, r, t, o, m) {
var c = 1e4 > h.recentlyCreatedOwnerStacks++;
return f(
e,
r,
t,
!0,
o,
m,
c ? Error("react-stack-top-frame") : M,
c ? P(l(e)) : F
);
};
}()), O;
}
var U;
function ce() {
return U || (U = 1, process.env.NODE_ENV === "production" ? w.exports = ae() : w.exports = se()), w.exports;
}
var j = ce();
const ue = "_wrapper_ebjkc_1", le = "_cursor_ebjkc_5", q = {
wrapper: ue,
cursor: le
}, fe = (u, _) => function(l) {
const n = ne(null), [s, i] = oe(!1), E = (f) => {
const R = f.currentTarget.getBoundingClientRect(), d = f.clientX - R.left, p = f.clientY - R.top;
if (n && n.current) {
const { x: k, y: b } = A(
n.current.clientWidth,
n.current.clientHeight,
d,
p
);
n.current.style.transform = `translate3d(${k}px, ${b}px, 0)`;
}
}, A = (f, R, d, p) => {
const k = d - f / 2, b = p - R / 2;
return { x: k, y: b };
}, S = {
ref: n,
...l
};
return /* @__PURE__ */ j.jsxs(
"div",
{
className: q.wrapper,
onMouseEnter: () => i(!0),
onMouseLeave: () => i(!1),
children: [
/* @__PURE__ */ j.jsx("div", { className: q.cursor, style: { opacity: s ? 1 : 0, pointerEvents: "none" }, children: /* @__PURE__ */ j.jsx(_, { ...S }) }),
/* @__PURE__ */ j.jsx("div", { onMouseMove: E, style: { cursor: "none" }, children: /* @__PURE__ */ j.jsx(u, { ...l }) })
]
}
);
};
export {
fe as WithCustomCursor
};