dzucconi

# this directive processor enhances sprockets with the ability to load bower
# and npm packages
#
# usage is simple
#
# //= browserify 'my_library'
# window.MyLibrary
# browserify.modules['my_library']
#
# if you would like to to control the name of what's loaded do this

dzucconi

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";

/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
  const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
  const [mouseX, mouseY] = useMousePosition();
  const positions = { x, y, h, w, mouseX, mouseY };
  return (
    <div