useIsMouseInactive (SolidJS)

Get a signal that lets you know when the mouse has stopped moving for some time.

typescriptjavascript
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
}

Usage

tsxjsx
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>
)
}

Example

Created 08/27/22Updated 03/18/23
Found a mistake, or want to suggest an improvement? Edit on GitHub here
and see edit history here