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,
},
})
}