react-autosuggestをBootstrapで使う

react-autosuggestはReactでオートコンプリートを実装できるライブラリ。しかしこれはデザインがない。自分で作るか、多分デモのやつを使う必要があるが、Bootstrapを使っている場合はそれのDropdownをそのまま使いたい。

その場合はthemeプロパティで使うクラスを指定できる。下記のように設定すればOKっぽい

      <Autosuggest
        theme={{
          container: 'autosuggest',
          input: 'form-control',
          suggestionsContainer: 'dropdown open',
          suggestionsList: `dropdown-menu ${items.length ? 'show' : ''}`,
          suggestion: '',
          suggestionFocused: 'active'
        }}

あとはrenderSuggestionsも調整。

const renderItem = (item: Item) => (
  <a className="dropdown-item" href="#">
    {item.name}
  </a>
)

下記で話題に上がっている（最初の方に古くてちゃんと動かないのもあるのでご注意）。

https://github.com/moroshko/react-autosuggest/issues/64