AlgoliaのReact Instantsearch Hooksを使って、任意のタイミングで検索を実行する

Instantsearch Hookには、その名の通りReact Hookが用意されています。 このHookの戻り値を使うことで、検索フォームへの情報入力以外の、任意のタイミングで検索を実行できます。 UIStateを更 […]

広告ここから
広告ここまで

目次

    Instantsearch Hookには、その名の通りReact Hookが用意されています。

    import { useInstantSearch } from 'react-instantsearch-hooks-web'
    
    useInstantSearch()

    このHookの戻り値を使うことで、検索フォームへの情報入力以外の、任意のタイミングで検索を実行できます。

    UIStateを更新する

    <Hits><SearchBox>要素の中身も更新させたい場合、useInstantSearchで取得できるsetUiState関数を利用します。

    const { setUiState } = useInstantSearch()
    const searchCustom = (word: string) => {
      setUiState({
        'YOUR_ALGOLIA_IDNEX_NAME': {
          query: word
        }
      })
    }

    インデックス名が必要なことに注意しましょう。

    現在の検索設定を維持する場合、uiStateも利用する

    上のサンプルでは、<RefinementList>などで追加した設定が消えてしまいます。

    現在の設定を活かしたい場合は、uiStateオブジェクトを取得して中身を書き換える形にしましょう。

    const indexName = 'YOUR_ALGOLIA_IDNEX_NAME'
    const { uiState, setUiState } = useInstantSearch()
    
    const searchCustom = (word: string) => {
      setUiState({
        ...uiState,
        [indexName]: {
          ...uiState[indexName],
          query: word,
        },
      })
    }

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark