CODEWITHSUNDEEP
reactjsalgoliareact-instantsearch
Roberto
Roberto

Reputation: 1813

Display Grid results with Algolia React Instantsearch

I have a working demo of this InstantSearch, but I can't find the way of displaying the results as a grid and not a list.

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

And Product is a card with the result information. The only way I seem to be able to access the list of results is with Hits, but that won't allow me to create a grid.

Any help is welcome.

Upvotes: 0

Views: 701

Answers (2)

Roberto
Roberto

Reputation: 1813

Thanks to @Marie

This is how I've done it and it works.

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);

Upvotes: 2

Marie
Marie

Reputation: 366

You can use the connectHits connector to use your very own markup.

Connectors are Higher Order Components.

Here's a little example: 

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

More information about connectors here: https://community.algolia.com/react-instantsearch/guide/Connectors.html

Upvotes: 2

Related Questions