\n 
\n
\n \n
\n \n );\n }\n },\n }\n )\n ``` \n \n - **onItemSelect `Function`**\n \n It is a callback that accepts parameters(algolia control params), one of them is the `setQuery` function, utilize it to customize the behavior of what happens when an individual suggestion item is clicked.\n\n ```jsx\n createSuggestionsPlugin(\n ...,\n ...,\n {\n renderItem: (props) => {\n ...\n },\n onItemSelect: (props) => {\n const {\n item: { url, label },\n setQuery,\n refresh\n } = props;\n \n if (url) {\n setQuery(label);\n window.open(url);\n } else {\n setQuery(label);\n refresh();\n }\n },\n }\n )\n ``` \n \n - **renderHeader `Function`**\n \n It is a callback that accepts parameters(algolia params), one may utilize it to render a custom header before the suggestions.\n ```jsx\n createSuggestionsPlugin(\n ...,\n ...,\n {\n renderItem: (props) => {\n ...\n },\n onItemSelect: (props) => {\n ...\n },\n renderHeader: (props) => {\n return (\n {item.value}
\n{item._source.shortDescription}
\n\n Products Listing
\n
\n );\n },\n }\n )\n ``` \n \n - **renderFooter `Function`**\n \n It is a callback that accepts parameters(algolia params), one may utilize it to render a custom footer after the suggestions.\n\n ```jsx\n createSuggestionsPlugin(\n ...,\n ...,\n {\n renderItem: (props) => {\n ...\n },\n onItemSelect: (props) => {\n ...\n },\n renderHeader: (props) => {\n ...\n },\n renderFooter: (props) => {\n return ;\n },\n }\n )\n ```\n \n\n \n - **renderNoResults `Function`**\n \n It is a callback that accepts parameters(algolia params), one may utilize it to render a custom UI when no results are found.\n \n ```jsx\n createSuggestionsPlugin(\n ...,\n ...,\n {\n renderItem: (props) => {\n ...\n },\n onItemSelect: (props) => {\n ...\n },\n renderHeader: (props) => {\n ...\n },\n renderFooter: (props) => {\n ...\n },\n renderNoResults: (props) => {\n if (props.state.query === \"\") {\n return
Search for something to get direct product suggestions!
;\n } else {\n returnNo products found! Try searching for something else!
;\n }\n }\n }\n )\n ```\n \n - **useContextValue `Boolean`** When set to true, the context value is set with the following value:\n \n ```jsx\n {\n total: ..., // total results found for the entered query\n time: ..., // total time taken to perform the search\n resultsJson: ... // the results that were found in json format\n }\n ```\n \n One can use this context value to display results stats.\n\n ```jsx\n createSuggestionsPlugin(\n ...,\n ...,\n {\n renderItem: (props) => {\n ...\n },\n onItemSelect: (props) => {\n ...\n },\n renderHeader: (props) => {\n ...\n },\n renderFooter: (props) => {\n ...\n },\n renderNoResults: (props) => {\n if (props.state.query === \"\") {\n returnSearch for something to get direct product suggestions!
;\n } else {\n returnNo products found! Try searching for something else!
;\n }\n },\n useContextValue: true\n }\n )\n ```\n","readmeFilename":"README.md"}