react-autocomplete-pure

Typescript-friendly autocomplete component for React.js. Fully customizable for your needs.Inspired by react-autosuggest and react-autocomplete

Basic usage

import { useState, useCallback } from 'React';
import {
  AutocompletePure,
  AutocompletePureProps,
  ChangeReason,
  RenderItem,
} from 'react-autocomplete-pure';

type Film = { title: string; year: number };

// make font bolder when item is highlighted
const renderItem: RenderItem<Film> = (item, { isHighlighted }) => (
  <span style={{ fontWeight: isHighlighted ? 700 : 400 }}>{item.title}</span>
);

// how to get item's label from item
const getSuggestionValue = (item: Film) => item.title;

function App() {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [suggestions, setSuggestions] = useState<Film[]>([]);
  const [value, setValue] = useState<string>('');

  // When input changes then save value
  // If change reason is type on input then get new items, save them and close dropdown if no new items fetched
  // If change reason is enter keydown then simple close dropdown
  const handleChange: AutocompletePureProps<Film>['onChange'] = useCallback(
    async (_event, { value, reason }) => {
      setValue(value);
      if (reason === 'INPUT') {
        const newFilms = await fetchFilms(value);
        setSuggestions(newFilms);
        setIsOpen(Boolean(newFilms.length));
      } else if (reason === 'ENTER') {
        setIsOpen(false);
      }
    },
    [],
  );

  // When item selected then save it and close dropdown
  const handleSelect: AutocompletePureProps<Film>['onSelect'] = useCallback((_event, { item }) => {
    const value = getSuggestionValue(item);
    setValue(value);
    setIsOpen(false);
  }, []);

  // Close dropdown when clicked outside of component
  const handleClickOutside = (_event: Event) => {
    setIsOpen(false);
  };

  return (
    <AutocompletePure
      open={isOpen}
      value={value}
      items={suggestions}
      onChange={handleChange}
      onSelect={handleSelect}
      onClickOutside={handleClickOutside}
      renderItem={renderItem}
      getSuggestionValue={getSuggestionValue}
    />
  );
}

Demo

Feel free to play with AutocompletePure component in Sandbox

Installation

via yarn

yarn add react-autocomplete-pure

via npm

npm install react-autocomplete-pure --save

Props

| Prop | Type | Required | Description | | ------------------ | ------------------------------------------------------------------------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- | | open | boolean | ✓ | Control the dropdown show state | | value | string | ✓ | The value of the autocomplete | | items | array | ✓ | Array of options | | renderItem | (item: Item, {isHighlighted: boolean}) => ReactNode | ✓ | Invokes for each entry in items to tell how to render each item in list. | | getSuggestionValue | (item: Item) => string | ✓ | Invokes to get new value when using keyboard events | | onChange | (event: ChangeEvent | KeyboardEvent, {value: string, reason: ChangeReason}) => void | ✓ | Callback fired when the value changes | | onSelect | (event: MouseEvent, {item: Item; itemIndex:number}) => void | ✓ | Callback fired when clicked on item in item list | | theme | Theme | | Uses to pass classNames to AutocompletePure's components | | renderInput | (props: ComponentPropsWithRef<'input'>) => JSX.Element | | Invokes to generate input element | | renderContainer | ({list}: {list: JSX.Element}) => JSX.Element | | Invokes to generate new element with list component | | onClickOutside | (event: Event) => void | | Invokes when clicking outside of component. Can use to change open state in callback | | onInputFocus | FocusEventHandler | | Invokes when input has focus |