react-accessible-dropdown-menu-hook

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #llm #golang #linux #docker #nodejs #java #cli #kubernetes #pytorch #security #open-source

react-accessible-dropdown-menu-hook

(★ 112)

A simple Hook for creating fully accessible dropdown menus in React

react-accessible-dropdown-menu-hook Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# <div align="center">React Accessible Dropdown Menu Hook</div>

This Hook handles all the accessibility logic when building a dropdown menu, dropdown button, etc., and leaves the design completely up to you. It also handles the logic for closing the menu when you click outside of it.

- ♿️ Fully accessible
- 📦 Written entirely in TypeScript
- 🔬 Thoroughly tested
- ⚡️ Zero dependencies
- ✨ Tiny size

## Quick start

Install with Yarn or npm:

```
yarn add react-accessible-dropdown-menu-hook
```

```
npm install react-accessible-dropdown-menu-hook
```

Import the Hook:

```tsx
import useDropdownMenu from 'react-accessible-dropdown-menu-hook';
```

Call the Hook, telling it how many items your menu will have:

```tsx
const { buttonProps, itemProps, isOpen } = useDropdownMenu(numberOfItems);
```

Spread the `buttonProps` onto a button:

```tsx
<button {...buttonProps}>Example</button>
```

Create the menu with the `role='menu'` property and spread `itemProps[x]` onto each item:

```tsx
<div className={isOpen ? 'visible' : ''} role='menu'>
    <a {...itemProps[0]} href='https://example.com'>Regular link</a>
    <a {...itemProps[1]} onClick={handleClick}>With click handler</a>
</div>
```

Done!

## Documentation

Read the docs at: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/docs/

## Demo

See it in action: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/demo/

## Accessibility notes

Our team carefully studied and adhered to strict accessibility guidelines when designing this Hook. To learn more, see: https://sparksuite.github.io/react-accessible-dropdown-menu-hook/docs/design/accessibility.

## Contributing

We love contributions! Contributing is easy; [learn how](https://github.com/sparksuite/react-accessible-dropdown-menu-hook/blob/master/CONTRIBUTING.md).

react-accessible-dropdown-menu-hook

react-accessible-dropdown-menu-hook Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-accessible-dropdown-menu-hook

react-accessible-dropdown-menu-hook Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README