Skip to main content

Develop with FastTrack

ResultsSnippet

The ResultsSnippet widget displays MarkLogic search results as document URIs and search snippets. Search snippets are portions of matching documents. The matching text in the search snippets is highlighted.

ResultsSnippet example rendering

In this example, the ResultsSnippet widget displays results for the search "life AND good". Pagination is turned on in the widget footer.

The ResultsSnippet widget displays results for the search "life AND good". Pagination is turned on in the widget footer.

ResultsSnippet configuration

In this example, the ResultsSnippet widget displays search results returned from MarkLogic using MarkLogicContext. The results prop accepts a search results object from the context.

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsSnippet } from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
  
  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }
  
  return (
    <div className="App">
      <div className="SearchBox">
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div>
        <ResultsSnippet
          results={context.searchResponse.results}
          paginationFooter={true}
        />
      </div>
    </div>
  );
}
  
export default App;

ResultsSnippet API

Prop	Type	Description
results	object	Search results data to display.
highlightBg	string	HTML background color for the highlighted matching text. Default: `“#FFFFB0”`.
highlightText	string	HTML color for the highlighted matching text. Default: `"#212529"`.
highlightWeight	string	CSS font-weight value for the highlighted matching text. Default: `"bold"`.
className	string	Class name applied to the widget.
onClick	((result: any) => void)	Callback function triggered when a result item is clicked. Receives the result object.
onScroll	((event: ListViewEvent) => void)	Callback function triggered when the widget has been scrolled. Receives an event object.
titleStyle	string	CSS styles applied to each result title.
snippetStyle	string	CSS styles applied to each result snippet.
resultStyle	string	CSS styles applied to each result.
headerClassName	string	Class name applied to the widget header.
headerValue	ReactNode	Content displayed in the widget header.
footerClassName	string	Class name applied to the widget footer.
footerValue	ReactNode	Content to display in the widget footer.
paginationHeader	boolean	Indicates whether to display pagination controls in the header.
paginationFooter	boolean	Indicates whether to display pagination controls in the footer.
pageSizeChanger	number[] \| (string \| number)[]	Numeric array for displaying a menu in the pagination for configuring the number of items on each page.
showPreviousNext	boolean	Indicates whether to display previous and next buttons in the pagination.
showInfoSummary	boolean	Optional value for displaying the results summary in the pagination options.
paginationClassName	string	Class name applied to the pagination container.
paginationSize	"small" \| "medium" \| "large"	Size of the pagination.
pagerButtonCount	number	The number of page buttons to display in the pagination controls.

In this section: