useClickAnyWhere

Custom hook that handles click events anywhere on the document.

Usage

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

pnpm

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

npm

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

bun

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

yarn

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

Name	Type	Description
handler	(event: MouseEvent) => void	The function to be called when a click event is detected anywhere on the document.

Returns

void

Hook

import { useEventListener } from 'vhooks'

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