Usage no npm install needed!

<script type="module">
  import pacoteReactUseOutside from 'https://cdn.skypack.dev/@pacote/react-use-outside';
</script>

README

@pacote/react-use-outside

version minified minified + gzip

Hook to handle events outside React components.

Installation

yarn add @pacote/react-use-outside

Usage

`useOutside<T>(type: Array<keyof DocumentEventMap> | keyof DocumentEventMap, listener: EventListener): React.RefObject<T>`

Takes one or more event types to listen and an event listener function and returns a reference which can be applied to a DOM element. The provided function will be called for all listened events triggered outside the component.

import React from 'react'
import { useOutside } from '@pacote/react-use-outside'

const Modal = () => {
  const ref = useOutside('click', () => {
    console.log('Clicked outside!')
  })

  return <div ref={ref}>Click outside to show console message.</div>
}