@multisynq/react-together/dist/components/HoverHighlighter.js

A library to seamlessly add real-time multi-user interaction to your React app!

import { jsxs as c, Fragment as f, jsx as d } from "react/jsx-runtime";
import u from "color-hash";
import "@croquet/react";
import "unique-names-generator";
import g from "../hooks/useMyId.js";
import "react";
import h from "../hooks/useHoveringUsers.js";
import "../object_hash-1efe2599.js";
const x = new u();
function F({
  rtKey: o,
  children: n,
  className: l,
  highlightMyself: r = !1
}) {
  const [m, e, p] = h(o), a = g();
  let i = {};
  const s = r ? e : e.filter((t) => t !== a);
  return (s.length > 0 || r && p) && (i = {
    outline: `2px solid ${x.hex(s[0] ?? o)}`,
    animation: "clippath 3s linear infinite",
    borderRadius: "10px"
  }), /* @__PURE__ */ c(f, { children: [
    /* @__PURE__ */ d("div", { ref: m, style: i, className: l, children: n }),
    !1
  ] });
}
export {
  F as default
};