Skip to content

useClickAnyWhere

Custom hook that handles click events anywhere on the document.

Usage

tsx
import { useState } from 'react'

import { useClickAnyWhere } from 'vhooks'

export default function Component() {
  const [count, setCount] = useState(0)

  useClickAnyWhere(() => {
    setCount(prev => prev + 1)
  })

  return <p>Click count: {count}</p>
}

Installation

sh
pnpm dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useClickAnyWhere.json -e %src%/hooks
sh
npx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useClickAnyWhere.json -e %src%/hooks
sh
bunx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useClickAnyWhere.json -e %src%/hooks
sh
yarn dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useClickAnyWhere.json -e %src%/hooks

API

useClickAnyWhere(handler): void

Custom hook that handles click events anywhere on the document.

Parameters

NameTypeDescription
handler(event: MouseEvent) => voidThe function to be called when a click event is detected anywhere on the document.

Returns

void

Hook

ts
import { useEventListener } from 'vhooks'

export function useClickAnyWhere(handler: (event: MouseEvent) => void) {
  useEventListener('click', event => {
    handler(event)
  })
}

vDocs