Typing of Prop in Custom Hit Component

[theovier]

Hi,

I'm currently trying to correctly type my Hit and I'm a bit lost.

Assuming I have this setup

<InstantSearch indexName="books" searchClient={searchClient}>
     <SearchBox />
     <Hits hitComponent={Hit} />
</InstantSearch>

Further assuming I know that the hit documents will include an attribute called name. How do I type the prop of my Hit component correctly? I tried the following which is obviously not working:

const Hit: React.FC<{ hit: HitsProps<{ name: string }> }> = ({ hit }) => {
    return <div>{hit.name}</div>; // TS2339: Property  name  does not exist on type  HitsProps<{ name: string; }>
};

How do I type the hit correctly so that I can access my document's attributes typesafe in my custom Hit component?

Thanks! :)

[dhayab]

Here's an example of how it could be typed:

import type { Hit } from 'instantsearch.js';

type HitProps = {
  hit: Hit<{
    name: string;
  }>;
};

const Hit: React.FC<HitProps> = ({ hit }) => {
  return <div>{hit.name}</div>;
};

[theovier]

Ah, I missed the Hit type. Thanks!