Stats

This component lets you display how many results matched the query and other metrics on the results such as how fast the search was.

Example

import {
  HitsStats,
  SearchkitComponent
} from "searchkit";

class App extends SearchkitComponent<any, any> {

  render(){
    <div>
        <HitsStats/>
    </div>
  }
}

Props

• translations (Object): An object of translations you wish to override. For more information on translations see translate page.
• mod (string): Optional. A custom BEM container class.

Demo

See the Pen by searchkit (@searchkit) on CodePen.

Extending Component

import {
  HitsStats,
  SearchkitComponent
} from "searchkit";

class ExampleHitStats extends HitsStats {
  renderText() {
    return (<div className="{this.bemBlocks.container("info")}">override text</div>)
  }
}

class App extends SearchkitComponent<any, any> {
  render(){
    <div>
        <ExampleHitStats/>
    </div>
  }
}

You can override the default display for HitsStats by overriding the renderText method. You have access to the following methods to retrieve metadata on the search:

• getHitCount returns the number of hits.
• getTime returns the time taken for the query.
• getResults returns the results object.

Props

• translations (Object): An object of translations you wish to override. For more information on translations see translate page.

Translations

• hitstats.results_found - "{numberResults} results found in {timeTaken}"