Searchstax ResultWidget for React and Next.js

The SearchStax Site Search solution offers a React and Next.js results widget to assist with your custom search page.

The SearchstaxResultsWidget displays the search results.

Usage

1
2
3
<SearchstaxResultsWidget
  afterLinkClick={afterLinkClick}
/>

Props

  • afterLinkClick – Callback when a result link is clicked. Allows handling link click behavior.
  • noResultTemplate – Renders custom UI when no results are returned.
  • resultsTemplate – Renders custom UI for the results list.

noResultTemplate

Customize the no results UI.

It receives:

  • searchTerm – The search term used
  • metaData – Search metadata object

resultsTemplate

Customize the results UI.

It receives:

  • searchResults – Array of result items
  • resultClicked – Handler when a result is clicked

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<SearchstaxResultsWidget
  afterLinkClick={afterLinkClick}
 
  noResultTemplate={(searchTerm, metaData) => (
    <div>
      {/* Custom no result UI */}
    </div>
  )}
 
  resultsTemplate={(searchResults, resultClicked) => (
    <div>
      {searchResults.map(result => (
        <div
          key={result.uniqueId}
          onClick={() => resultClicked(result)}
        >
          {/* Custom result UI */}
        </div>
      ))}
    </div>
  )}
/>

Questions?

Do not hesitate to contact the SearchStax Support Desk.