Usage no npm install needed!

<script type="module">
  import appElementsUseDocumentClick from 'https://cdn.skypack.dev/@app-elements/use-document-click';
</script>

README

useDocumentClick

useDocumentClick takes a ref and a callback. When a click (or tap) occurs, the callback is invoked with a boolean indicating if the click happened outside of the given ref.

Useful for closing dropdowns, modals, dialogs, etc. when the user clicks outside of the component.

Installation

npm install --save @app-elements/use-document-click

Usage

import { useDocumentClick } from '@app-elements/use-document-click'

const MyComponent = (props) => {
  const ref = useRef()
  useDocumentClick(ref, (isOutsideRef) => isOutsideRef && setOpen(false))
  
  return (
    <h1 ref={ref}>Hello</h1>
  )
}

Props

Prop	Type	Default	Description
`ref`	Ref	None	The React ref
`callback`	Function	None	Function to invoke on document click