use-typeahead v1.0.0

useTypeahead

A headless, lightweight typeahead library built on React Hooks.

Features

• Single hook implementation
• Built with TypeScript
• ~1.5Kb minified, no dependencies
• 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

Example

export const Typeahead = (props: TypeaheadProps) => {
  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>
  );
};