@tracksuitdev/use-dropdown v1.1.0

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

Props

UseDropdownProps

Return value

UseDropdown<T>