#useOutClick

import { useOutClick } from '@hitechline/reactools';
import { useState, useCallback, useEffect } from 'react';

const Component = () => {
  const [navbarOpened, setOpened] = useState(false);
  const { ref, addListener, removeListener } = useOutClick();

  const open = useCallback(() => {
    setOpened(true);
  }, []);

  const close = useCallback(() => {
    setOpened(false);
  }, []);

  useEffect(() => {
    addListener(close);

    return () => {
      removeListener(close);
    };
  }, [close, addListener, removeListener]);

  return (
    <div>
      <button type="button" onClick={open}>
        Open
      </button>

      {navbarOpened && <nav>...</nav>}
    </div>
  );
};