ResultsSnippet

Save PDF

Last Updated: May 5, 2026
3 minute read

MarkLogic Server
Documentation

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. See PaginationProvider for setup requirements to enable pagination functionality.

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} // Note: Pagination requires that the application be wrapped by PaginationProvider
        />
      </div>
    </div>
  );
}
  
export default App;

Avoid Unnecessary Re-renders

You can avoid unnecessary re-renders of the ResultsSnippet widget (for example during MarkLogicContext state updates) by wrapping any callback functions passed in as props with the useCallback hook. For details, see Avoid Unnecessary Re-renders of FastTrack Widgets.

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.
onMouseEnter	((result: any) => void)	Callback function triggered when the mouse pointer enters a result item. Receives the result object.
onMouseLeave	((result: any) => void)	Callback function triggered when the mouse pointer leaves a result item. 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. Requires the application be wrapped by the PaginationProvider.
paginationFooter	boolean	Indicates whether to display pagination controls in the footer. Requires the application be wrapped by the PaginationProvider.
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.
PagerProps	PagerProps	KendoReact Pager props for the Pagination menu.

Develop with FastTrack

ResultsSnippet

Table of Contents

ResultsSnippet

ResultsSnippet example rendering

ResultsSnippet configuration

Avoid Unnecessary Re-renders

ResultsSnippet API