# @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)).

Latest version **1.1.0** (published 2022-12-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tracksuitdev/use-dropdown
pnpm add @tracksuitdev/use-dropdown
yarn add @tracksuitdev/use-dropdown
bun add @tracksuitdev/use-dropdown
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-12-28 |
| First published | 2021-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | tracksuitdev |
| Maintainers | tracksuitdev |
| Keywords | react, hooks, dropdown, click outside |

## Links

- npm: https://www.npmjs.com/package/@tracksuitdev/use-dropdown
- Repository: https://github.com/tracksuitdev/use-dropdown
- Homepage: https://github.com/tracksuitdev/use-dropdown#readme
- npm.io page: https://npm.io/package/@tracksuitdev/use-dropdown

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-12-28
- 1.0.0 — 2021-07-07

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

## Usage

```typescript jsx
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`](#props)): [`UseDropdown`](#return-value)<`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 |

---
_Source: https://npm.io/package/@tracksuitdev/use-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._