useDropdown

React hook for managing dropdown state. Can be used to manage state of any component that closes when clicked outside or outside some other component/s (see additionalRefs).

Usage

const App = () => {
  const buttonRef = useRef(null);
  const {dropdownRef, isOpen, open, close} = useDropdown({additionalRefs: [buttonRef]});

  const handleClick = isOpen ? close : open;

  return (
    <div>
      <button onClick={handleClick} ref={buttonRef}>
        {isOpen ? "Close" : "Open"}
      </button>
      {isOpen && (
        <ul ref={dropdownRef}>
          <li>dropdown item 1</li>
          <li>dropdown item 2</li>
          <li>dropdown item 3</li>
        </ul>
      )}
    </div>
  );
};

Docs

▸ useDropdown<T>(props: UseDropdownProps): UseDropdown<T>

Hook for managing dropdown state.

Adds window listener that will close dropdown on clicks outside of dropdownRef and additional refs.

Type parameters

Name	Type	Description
T	extends HTMLElement = HTMLUListElement	Type of dropdown element

Props

UseDropdownProps

Name	Type	Description
event	"click" or "mousedown"	Event that triggers dropdown close if outside of dropdown, default is "click"
additionalRefs?	RefObject<HTMLElement>[]	These refs will be used when determining what constitutes a click outside of dropdown.
disabled?	boolean	If true, open and close will do nothing
onClose?	() => void	Executed when close is called
onOpen?	() => void	Executed when open is called

Return value

UseDropdown<T>

Name	Type	Description
dropdownRef	RefObject<T>	Ref for dropdown element
isOpen	boolean	Dropdown state
open	() => void	Sets isOpen to true
close	() => void	Sets isOpen to false