searchcraft-results-info

This web component is designed to display the number of results returned from a search query.

Import

React

import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";

Vue

import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";

Usage

JS

index.html

<searchcraft-results-info />

index.js

const resultsInfo = document.querySelector('searchcraft-results-info');

resultsInfo.template = (info, { html }) => html`
  ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
`;

React

<SearchcraftResultsInfo
  template={(info, { html }) => html`
    ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
  `}
/>

Vue

<SearchcraftResultsInfo
  :template={(info, { html }) => html`
    ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
  `}
/>

Properties

Property	Attribute	Description	Type	Default
searchcraftId	searchcraft-id	The id of the Searchcraft instance that this component should use.	string | undefined	undefined
template	—	A callback function responsible for rendering the results info.	((data: { range: [number, number]; count: number; responseTime: string; }, utils: { html: TemplateHtml; }) => string) | undefined	undefined