Helper hook for creating divs attached to mouse cursor

useMouseIndicator.ts

import { useEffect, useState } from 'react'

export type UpdateIndicator = (x: number, y: number) => void

export function useMouseIndicator(indicatorFactory?: () => { el: HTMLElement; update: UpdateIndicator; }) {
  const [isActive, setIsActive] = useState(false)

  useEffect(function attach() {
    if (!isActive) return
    if (!indicatorFactory) return

    const { el, update } = indicatorFactory()

    const handleWindowMouseMove = (event: MouseEvent) => {
      const x = event.clientX
      const y = event.clientY
      update(x, y)
    }

    window.addEventListener('mousemove', handleWindowMouseMove)
    document.body.appendChild(el)
    return () => {
      window.removeEventListener('mousemove', handleWindowMouseMove)
      document.body.removeChild(el)
    }
  }, [
    isActive,
    indicatorFactory,
  ])

  return setIsActive
}