use-on-click-outside

Usage

npm i @biggerpixel/use-on-click-outside

import React, { useRef } from 'react';
import useBoolState from '@biggerpixel/use-bool-state';
import useOnClickOutside from '@biggerpixel/use-on-click-outside';

const Component = () => {
  const elementWrapper = useRef<HTMLDivElement>(null);
  const [isOpen, toggleIsOpen] = useBoolState(false);

  useOnClickOutside(elementWrapper, toggleIsOpen);

  return (
    isOpen && (
      <div ref={elementWrapper}>
        <h2>Content!</h2>
        <p>(Click outside to close)</p>
      </div>
    )
  );
};

export default Component;