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

<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

<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.