2020-10-12に更新

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

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, React, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント