@billogram/use-dropdown NPM

@billogram/use-dropdown

A React hook for dropdown components

Install

yarn add @billogram/use-dropdown

Usage

import useDropdown from '@billogram/use-dropdown';

See types for exported types.

`useDropdown`

It is important that implemented dropdowns conform with WAI-ARIA best practices.

const listRef = React.useRef<HTMLElement>(null);
const optionsRef = React.useRef(new Map<number, HTMLElement | null>());

const {
    change,
    close,
    expanded,
    handleKeyDown,
    handleKeyPress,
    highlightedIndex,
    isTypeahead,
    open,
    selectedOption,
    toggle,
} = useDropdown<Options>({
    disabled: false,
    isExpandedInitial: false,
    listNode: listRef.current,
    optionNodes: Array.from(optionsRef.current.values()),
    options: [],
    onChange: noop,
    onClose: noop,
    shouldTriggerChangeOnEnterOrSpace: true,
    value: '',
});

Note

This library is being published with our use cases in mind and is not necessarily meant to be consumed by the broader public. We probably won't take your feature requests unless they align with our own needs.