API Reference / React InstantSearch / Hits

Hits

Signature 
<Hits
  // Optional parameters
  hitComponent={function}
/>
Import
Copy 
1

import { Hits } from 'react-instantsearch-dom';
See code examples
See live example

About this widget

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

Use the hits widget to display a list of results.

To configure the number of hits retrieved, use the HitsPerPage widget or pass the hitsPerPage prop to a Configure widget.

For guidance on how to search across more than one index, read the multi-index search guide.

Examples

Copy 
1
2
3

import { Hits } from 'react-instantsearch-dom';

<Hits />

Props

hitComponent
type: function
Optional

Renders each hit from the results. If it is not provided, the rendering defaults to displaying the hit in its JSON form. The provided component is called with a hit prop.
Copy 
1
2
3

const Hit = ({ hit }) => <p>{hit.name}</p>;

<Hits hitComponent={Hit} />

HTML output

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="ais-Hits">
  <ul class="ais-Hits-list">
    <li class="ais-Hits-item">
      ...
    </li>
    <li class="ais-Hits-item">
      ...
    </li>
    <li class="ais-Hits-item">
      ...
    </li>
  </ul>
</div>

Customize the UI with connectHits

If you want to create your own UI of the Hits widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

It’s a 3-step process:

// 1. Create a React component
const Hits = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomHits = connectHits(Hits);

// 3. Use your connected widget
<CustomHits />

See code examples

Create a React component

const Hits = ({ object[] hits }) => {
  // return the DOM output
};

Provided Props

hits
type: object[]

The hits that matched the search request.
Copy 
1
2
3
4
5
6
7

const Hits = ({ hits }) => (
  <ol>
    {hits.map(hit => (
      <li key={hit.objectID}>{hit.name}</li>
    ))}
  </ol>
);
insights
type: function
signature: (method: string, payload: object) => void

Sends insights events.

  • method: string: the insights method to be called. Only search-related methods are supported: 'clickedObjectIDsAfterSearch', 'convertedObjectIDsAfterSearch'.
  • payload: object: the payload to be sent.
    • eventName: string: the name of the event.
    • objectIDs?: string[]: a list of objectIDs.
    • index?: string: the name of the index related to the click.
    • queryID?: string: the Algolia queryID that can be found in the search response when using clickAnalytics: true.
    • userToken?: string: a user identifier.
    • positions?: number[]: the position of the click in the list of Algolia search results. When not provided, objectIDs, index, queryID, and positions are inferred by the InstantSearch context and the passed hit:
    • objectIDs by default contains a single objectID: the objectID of the hit.
    • index by default is the name of index that returned the hit.
    • queryID by default is the ID of the query that returned the hit.
    • positions by default contains a single, absolute position: the position of the hit.

For more details on the constraints that apply to each payload property, please refer to insights client documentation.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { Configure, Hits, connectHitInsights } from 'react-instantsearch-dom';

const Hit = ({ hit, insights }) => (
  <article>
    <h1>{hit.name}</h1>
    <button
      onClick={() =>
        insights('clickedObjectIDsAfterSearch', {
          eventName: 'Add to favorite'
        })
      }
    >
      Add to favorite
    </button>
  </article>
);

// You need to call `window.aa('init', { appId, apiKey })` before.
// Make sure Hit has a `hit` prop.
const HitWithInsights = connectHitInsights(window.aa)(Hit);

// usage
<Configure clickAnalytics />
<Hits hitComponent={HitWithInsights} />

Create and instantiate your connected widget

const CustomHits = connectHits(Hits);

<CustomHits />

Full example

Copy 
1
2
3
4
5
6
7
8
9
10
11

import { connectHits } from 'react-instantsearch-dom';

const Hits = ({ hits }) => (
  <ol>
    {hits.map(hit => (
      <li key={hit.objectID}>{hit.name}</li>
    ))}
  </ol>
);

const CustomHits = connectHits(Hits);

Sending Click and Conversion events

Please refer to the guide on Sending Insight Events to learn about sending events from any InstantSearch widget.

Guides Send events with React InstantSearch
Did you find this page helpful?
React InstantSearch v6