Translate

All components run a translate function on any text displayed. This includes:

  • filter options (for when options are ids and required to be rendered in text)
  • previous / next navigation
  • show more / show less / show all action text
  • search placeholder

and many more in components.

Interpolations

Some translations contain interpolations, E.g. NoHits.NoResultsFound which has a default translation of No results found for {query}. which means the component will provide the query value.

How to override global defaults


const searchkit = new SearchkitManager("locahost:9200")

searchkit.translateFunction = (key) => {
  let translations = {
    "pagination.previous":"Previous page",
    "pagination.next":"Next page",
    "id1":"Color",
    "id2": "Red"
  }
  return translations[key]
}

Override component defaults

You can pass any component an object of translations you wish to override. Example below:

<SearchBox translations={{"searchbox.placeholder":"search movies"}} autofocus={true} searchOnChange={true} queryFields={["actors^1","type^2","languages","title^5", "genres^2"]}/>

List of all translation overrides with their defaults

ResetFilters

  • reset.clear_all - Clear All Filters

RefinementListFilter

  • facets.view_more - View more
  • facets.view_less - View less
  • facets.view_all - View all

NoHits

  • NoHits.NoResultsFound - No results found for {query}.
  • NoHits.DidYouMean - Search for {suggestion}.
  • NoHits.SearchWithoutFilters - Search for {query} without filters
  • NoHits.NoResultsFoundDidYouMean:No results found for {query}. Did you mean {suggestion}?

HitStats

  • hitstats.results_found - {hitCount} results found in {timeTaken}ms

Pagination

  • pagination.previous - Previous
  • pagination.next - Next
  • searchbox.placeholder - "Search"