useIsMouseInactive (SolidJS)

import {
  Accessor,
  createEffect,
  createMemo,
  createSignal,
  onCleanup,
  onMount,
} from 'solid-js'
interface UseIsMouseInactiveOptions {
  timeout?: number | Accessor<number>
  root: Element | Accessor<Element | null | undefined>
}
export const useIsMouseInactive = (props: UseIsMouseInactiveOptions = {}) => {
  const [inactive, setInactive] = createSignal(false)
  let timer: NodeJS.Timeout
  const onMouseMove = () => {
    setInactive(false)
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      setInactive(true)
    }, props.timeout ?? 5000)
  }
  createEffect(() => {
    const el = props.root
    if (!el) return
    onMount(() => {
      el.addEventListener('mousemove', onMouseMove)
      onMouseMove()
    })
    onCleanup(() => {
      el.removeEventListener('mousemove', onMouseMove)
    })
  })
  return inactive
}

import type { VoidComponent } from 'solid-js'
export const Example: VoidComponent = () => {
  const [element, setElement] = createSignal<HTMLElement>()
  const isInactive = useIsMouseInactive({
    get root() {
      return element()
    },
  })
  return (
    <div class="grid h-96 place-items-center">
      <div
        ref={setElement}
        class="h-64 w-64 bg-red-500"
        classList={{
          // Hide cursor when mouse hasn't moved for a while
          'cursor-none touch-none': isInactive(),
        }}
      />
    </div>
  )
}