useClickOutside

useClickOutside triggers callback when user clicks on the outside area of an element.

Install

To start using useClickOutside, you can install the @react-awesome/use-click-outside library or you can import it directly from @react-awesome/components if you have installed it before. In your project directory, run the following command to install the dependencies:

npm i @react-awesome/use-click-outside

Usage

import { useClickOutside } from '@react-awesome/use-click-outside'
 
const Example = () => {
  const ref = useRef(null)
  const [state, setState] = useState(false)
 
  useClickOutside(ref.current, () => {
    setState(false)
  })
 
  return (
    <>
      <div ref={ref}>
        <button onClick={() => setState(true)}>Open modal</button>
        <dialog open={state}>
          <p>Hey! click outside to close me.</p>
        </dialog>
      </div>
    </>
  )
}

Parameters

The useClickOutside takes the following parameters:

inputEl

• Type: HTMLInputElement

callback

• Type: (event: MouseEvent | undefined) => any