useIsMouseInactive (SolidJS)

import {
  Accessor,
  createEffect,
  createMemo,
  createSignal,
  onCleanup,
  onMount,
} from 'solid-js'
 
interface UseIsMouseInactiveOptions {
  timeout?: number
  root: Element | Window | null
}
 
export const useIsMouseInactive = (props: UseIsMouseInactiveOptions) => {
  const [inactive, setInactive] = createSignal(false)
  let timer: ReturnType<typeof setTimeout>
 
  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 { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
 
export const useIsMouseInactive = props => {
  const [inactive, setInactive] = createSignal(false)
  let timer
 
  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>
  )
}

export const Example = () => {
  const [element, setElement] = createSignal()
 
  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>
  )
}