@sweepbright/use-click-outside

use-click-outside

Simple React hook to detect when a click happens outside a component. Useful for implementing modal dialogs and popups.

Installation

yarn add @sweepbright/use-click-outside

npm install @sweepbright/use-click-outside

Usage

import  {useClickOutside} from '@sweepbright/use-click-outside'


function Popup() {
    const ref= React.useRef(null)
    const onClickOutside = React.useCallback(() => {
        alert('clicked outside element')
    })

    useClickOutside(ref, {
        onClickOutside
    })

    return <div ref={ref}> Hello </div>

}

API

useClickOutside(ref, config, deps)

Params

ref

Param	Type	Description
ref	RefObject	A mutable ref object whose current property points target element DOM node

config

Param	Type	Description
config	Object	A configuration object for the behavior of the hook

Config options

The following options are supported

• onClickOutside: (evt: MouseEvent) => void
  • Required
  • Must be memoized
  • Will be called every time a click outside the target element is detected
  • It is passed the click event object
• skip: boolean
  • Optional
  • Defaults to false
  • Useful when you want to skip the listener. It can be used as a perf improvement when you know the element target element is not in the DOM.

deps

Param	Type	Description
deps	Array	Optional dependency array

Contributing

TODO

License

MIT