Searchstax RelatedSearchesWidget for React and Next.js

The SearchStax Site Search solution offers a related-searches widget for React and Next.js search pages.

The SearchstaxRelatedSearchesWidget displays related searches.

Usage

1
2
3
4
<SearchstaxRelatedSearchesWidget
  relatedSearchesURL={config.relatedSearchesURL}
  relatedSearchesAPIKey={config.relatedSearchesAPIKey}
/>

Props

  • relatedSearchesURL – Related searches API endpoint
  • relatedSearchesAPIKey – API key for related searches API

searchRelatedSearchesTemplate

Renders custom related searches UI.

Receives:

  • relatedData – Related searches data
  • executeSearch – Handles search when result clicked

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function searchRelatedSearchesTemplate(
    relatedData: null | ISearchstaxRelatedSearchesData,
    executeSearch: (result: ISearchstaxRelatedSearchResult) => void
  ) {
    return (
      <>
        {relatedData && relatedData?.searchExecuted && relatedData?.hasRelatedSearches && (
          <div className="searchstax-related-searches-container" id="searchstax-related-searches-container">
            {" "}
            Related searches: <span id="searchstax-related-searches"></span>
            {relatedData.relatedSearches && (
              <span className="searchstax-related-search">
                {relatedData.relatedSearches.map((related) => (
                  <span
                    key={related.related_search}
                    onClick={() => {
                      executeSearch(related);
                    }}
                    className="searchstax-related-search searchstax-related-search-item"
                  >
                    {" "}
                    {related.related_search}
                    {!related.last && <span>,</span>}
                  </span>
                ))}
              </span>
            )}
          </div>
        )}
      </>
    );
  }
  <SearchstaxRelatedSearchesWidget
                relatedSearchesURL={config.relatedSearchesURL}
                relatedSearchesAPIKey={config.relatedSearchesAPIKey}
                searchRelatedSearchesTemplate={searchRelatedSearchesTemplate}
              ></SearchstaxRelatedSearchesWidget>

Questions?

Do not hesitate to contact the SearchStax Support Desk.