useClickOutside

useClickOutside should be used to listen for clicks outside of given element. It is useful when you, for example, want to listen for clicks outside of a modal or similar.

Usage

import React from 'react';
import { useClickOutside } from '@fransvilhelm/hooks';
const Example = () => {
  const [open, setOpen] = useState(false);
  const modalRef = useRef(null);
  useClickOutside(modalRef, () => setOpen(false));
  return <div>{open && <Modal ref={modalRef} />}</div>;
};

Example

You can click here to close the above paragraph

Or here...

() => {
  const [open, setOpen] = useState(false)
  const ref = useRef(null)
  useClickOutside(ref, () => setOpen(false))
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && <p ref={ref}>Hey I'm open</p>}
      <p>You can click here to close the above paragraph</p>
      <p>Or here...</p>
    </div>
  )
}

() => {
  const [open, setOpen] = useState(false)
  const ref = useRef(null)
  useClickOutside(ref, () => setOpen(false))
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && <p ref={ref}>Hey I'm open</p>}
      <p>You can click here to close the above paragraph</p>
      <p>Or here...</p>
    </div>
  )
}

Parameters

useClickOutside two parameters:

Param	Type	Required	Default	Description
`ref`	`React.RefObject<HTMLElement>`	`true`	-	Ref to element on which to listen for clicks outside
`handler`	`(event: Event) => void`	`true`	-	Event handler fired on clicks outside of element