useTypeahead

A headless, lightweight typeahead library built on React Hooks.

Features

• Single hook implementation
• Built with TypeScript
• ~2Kb minified, no dependencies, tree-shaking supported
• Simple API, just provide a dataset and an optional configuration
• No styles provided, which means no overriding styles you don't like
• WAI-ARIA compliant

Installation

yarn add use-typeahead

Usage

const Typeahead = () => {
  const options = ['inscription', 'cacas', 'shelterers', 'dissimilitude', 'rustier', 'chervils', 'impossibly', 'ibuprofens', 'forechecker', 'misconceiving'];
  const {
    wrapperProps,
    inputProps,
    inputRef,
    menuProps,
    menuItems
  } = useTypeahead(options);

  return (
    <div {...wrapperProps}>
      <input
        ref={inputRef}
        {...inputProps}
      />
      <div {...menuProps}>
        {menuItems.map((opt) => <div {...opt.props}>{opt.value}</div>)}
      </div>
    </div>
  );
};

Configuration

Props

Name	Type	Default	Description
filterFn?	(item: any, searchTerm: string) => boolean		The callback to Array.prototype.filter() run on the dataset
maxWidth?	number	0	The max width of the dropdown menu
maxHeight?	number	200	The max height of the dropdown menu
offsetX?	number	0	The x-axis offset of the dropdown menu
offsetY?	number	0	The y-axis offset of the dropdown menu
menuAlign?	'left', 'right', 'justify'	'justify'	The alignment of the dropdown menu to the input element
minimumCharCount?	number	0	How long the search term needs to be before the dropdown menu shows
CSS Classes used for styling
wrapperClass?	string		The CSS class attribute attached to the HTML <div> wrapper element
inputClass?	string		The CSS class attribute attached to the HTML <input> element
menuClass?	string		The CSS class attribute attached to the HTML <div> dropdown menu element
menuItemClass?	string		The CSS class attribute attached to each HTML <div> menu item element

License

This project is licensed under the terms of the MIT license.