@tracksuitdev/use-dropdown

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](#props)).

Usage no npm install needed!

<script type="module">
  import tracksuitdevUseDropdown from 'https://cdn.skypack.dev/@tracksuitdev/use-dropdown';
</script>

README

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
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