How to use react-autosuggest - 5 common examples

/* eslint-disable react/sort-comp */
  state = {
    suggestions: this.props.suggestions || [],
  }

  sectionIterator: createSectionIterator = getSectionIterator(this.props)
  autosuggestInstance: Autosuggest = null
  userAreTyping: ?boolean = true

  static propTypes = {
    ...Autosuggest.propTypes,
    forceSuggestedValue: PropTypes.bool,
  }

  static defaultProps = {
    ...Autosuggest.defaultProps,
    highlightFirstSuggestion: true,
    getSuggestionValue: (suggestion) => suggestion.value,
    getSectionSuggestions: (section) => section.values,
    forceSuggestedValue: true,
    renderSuggestionsContainer: ({ containerProps, children, query }) => (
      
        {children}
      
    ),
    isSuggestAlreadySelected: (props) => Boolean(props.inputProps.IATACode),
    isValueEqualWithFirstSuggest: (value, suggestions) => (
      isValuesEqual(value, _get(suggestions, '0.value'))
      || isValuesEqual(value, _get(suggestions, '0.IATACode'))
    ),
  }
  /* eslint-enable react/sort-comp */

{ this.autosuggestInstance = ref }}
        theme={{
          // Pass `className` into Autosuggest theme. The `container` is className for root block
          ...Autosuggest.defaultProps.theme,
          container: className,
        }}
      />
    )
  }
}

: suggestions.length,
  })
)

class Autocomplete extends PureComponent {
  /* eslint-disable react/sort-comp */
  state = {
    suggestions: this.props.suggestions || [],
  }

  sectionIterator: createSectionIterator = getSectionIterator(this.props)
  autosuggestInstance: Autosuggest = null
  userAreTyping: ?boolean = true

  static propTypes = {
    ...Autosuggest.propTypes,
    forceSuggestedValue: PropTypes.bool,
  }

  static defaultProps = {
    ...Autosuggest.defaultProps,
    highlightFirstSuggestion: true,
    getSuggestionValue: (suggestion) => suggestion.value,
    getSectionSuggestions: (section) => section.values,
    forceSuggestedValue: true,
    renderSuggestionsContainer: ({ containerProps, children, query }) => (
      
        {children}
      
    ),
    isSuggestAlreadySelected: (props) => Boolean(props.inputProps.IATACode),
    isValueEqualWithFirstSuggest: (value, suggestions) => (

container: getClassName('bpk-autosuggest__container'),
  containerOpen: getClassName('bpk-autosuggest__container--open'),
  suggestionsContainer: getClassName('bpk-autosuggest__suggestions-container'),
  suggestionsContainerOpen: getClassName(
    'bpk-autosuggest__suggestions-container--open',
  ),
  suggestionsList: getClassName('bpk-autosuggest__suggestions-list'),
  suggestion: getClassName('bpk-autosuggest__suggestion-item'),
  suggestionHighlighted: getClassName(
    'bpk-autosuggest__suggestion-item--highlighted',
  ),
  sectionContainer: getClassName('bpk-autosuggest__section-container'),
  sectionTitle: getClassName('bpk-autosuggest__section-title'),
};

Autosuggest.defaultProps.renderInputComponent = inputProps => {
  const { ref, inputRef, autoComplete = 'off', ...rest } = inputProps;

  return (
     {
        ref(element);

        if (typeof inputRef === 'function') {
          inputRef(element);
        }
      }}
      autoComplete={autoComplete}
      {...rest}
    />
  );
};

import Autosuggest from 'react-autosuggest';
import { cssModules } from 'bpk-react-utils';

import STYLES from './BpkAutosuggest.scss';

const getClassName = cssModules(STYLES);

/*
  `react-autosuggest` is not wrapped in a functional component because the `ref` attribute won't work on it.
  This is because functional components don't have instances, and it is a mounted instance of the component
  what it's received by the `ref` callback.

  Further reading about Refs: https://facebook.github.io/react/docs/refs-and-the-dom.html
 */

Autosuggest.defaultProps.theme = {
  container: getClassName('bpk-autosuggest__container'),
  containerOpen: getClassName('bpk-autosuggest__container--open'),
  suggestionsContainer: getClassName('bpk-autosuggest__suggestions-container'),
  suggestionsContainerOpen: getClassName(
    'bpk-autosuggest__suggestions-container--open',
  ),
  suggestionsList: getClassName('bpk-autosuggest__suggestions-list'),
  suggestion: getClassName('bpk-autosuggest__suggestion-item'),
  suggestionHighlighted: getClassName(
    'bpk-autosuggest__suggestion-item--highlighted',
  ),
  sectionContainer: getClassName('bpk-autosuggest__section-container'),
  sectionTitle: getClassName('bpk-autosuggest__section-title'),
};

Autosuggest.defaultProps.renderInputComponent = inputProps => {