Afficher les résultats de la grille avec Algolia React Instantsearch

Question

J'ai une démo de travail de cette recherche instantanée, mais je ne peux pas trouver le moyen d'afficher les résultats comme une grille et non pas une liste.

<InstantSearch 
       appId="xxxxx" 
       apiKey="xxxxxx" 
       indexName="xxxx" 
      > 
      <SearchBox /> 
      <div> 
       <Hits hitComponent={Product} /> 
      </div> 
    </InstantSearch> 

Et Produit est une carte avec les informations de résultat. La seule façon dont je peux accéder à la liste des résultats est avec Hits, mais cela ne me permettra pas de créer une grille.

Toute aide est la bienvenue.

Answer 1

Vous pouvez utiliser le connecteur connectHits pour utiliser votre propre marquage.

Les connecteurs sont des composants d'ordre supérieur.

Voici un petit exemple:

const Hits = connectHits(({hits}) => { 
 
    const items = hits.map(hit => <div>{hit.name}</div>); 
 
    return <Grid><items></Grid> 
 
});

Plus d'informations sur les connecteurs ici: https://community.algolia.com/react-instantsearch/guide/Connectors.html

Answer 2

Merci à @Marie

Voilà comment je l'ai fait et Ça marche.

import React from 'react'; 

//Import Components 
import {connectHits} from 'react-instantsearch/connectors'; 
import Product from './Product' 

const MyHits = (props) => { 
    const items = props.hits.map(hit => <Product hit={hit} />); 
    return (
     <div> 
      <div className="my-grid mdc-layout-grid"> 
       <div className="mdc-layout-grid__inner"> 
        {items} 
       </div> 
      </div> 
     </div> 
    ); 
} 


export default connectHits(MyHits);