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 |