How to display facet values in react-instant search component

Hi

I have factes “category” values in query response, I need to display those facet categories into react-instant search component is there any way to get facets category and display it. I have already wasted my 1 day.

Thanks
Adil

Hi @adilsaeed31,

You have several ways to display those facets with React InstantSearch. It depends what you want to do with those facet values. I see two options:

  • Menu: this widget will display a list of facet values and you will be able to refine only one value at the same time, you can find more informations about it in our documentation.

  • RefinementList: this widget will display a list of facet values and you will be able to refine multiple values, you can find more informations about it in our documentation.

If those widgets don’t fit for your use case, you can also share a bit more of your context and what you are trying to achieve.

I will be happy to help!

@samuel.vaillant Hey thanks for the reply, I have already checked these options, but this is not my requirement, My requirement is like Hit component I want to display facets with custom DOM, I have search box field where an user will search for products then below to this field a box will open and display first 4 categories listing which are define in facets and then products I have completed the product view with the help of Hit component but facet categories are pending. And I don’t want nay checkboxes on it.

Thanks
Adil

Hi @adilsaeed31,

Thanks for the clarification.

For achieve such behaviour you can use the connector API. With the connectMenu connector you will have access to the facet values of the attribute name of you choice. Your custom component will looks like:

import { InstantSearch, Hits } from 'react-instantsearch/dom';
import { connectMenu } from 'react-instantsearch/connectors';

const FacetList = connectMenu(({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.value}>
        {item.label} ({item.count})
      </li>
    ))}
  </ul>
));

const App = () => (
  <InstantSearch>
    <FacetList attributeName="category" />
    <Hits />
  </InstantSearch>
);

@samuel.vaillant Hey Thanks for this solution, I need to know one last thing, Can I put another api call with search input like whenever user input anything on field algolia search request initiate after that or same time I want to initiate custom request both in parallel or back to back, is it possible ?

Hi @adilsaeed31,

Could you share a bit more about the use case? Which type of service? Would you want to merge the service results with Algolia results? Would you like to call the external service on each Algolia calls or only when the SearchBox change for example?

Thanks :slightly_smiling_face:

Hi @samuel.vaillant

Yes exactly, I want to merge the another api service result with algolia result, I want to call when SearchBox change.

Thanks

Hi @adilsaeed31,

We don’t provide anything to call an other service out of the box. But with the connector API you can achieve such behaviour because you will have the full control of what is rendered.

For the SearchBox part, you will need to use connectSearchBox. You will be responsible for calling the refine function that will trigger the call to Algolia. So you can plug the call to the external service at this level.

For other part, you will need to keep track of the results from the external service somewhere in your App (local state, Redux, …). Then you can use connectHits to have access to the Agolia results and merge them with the one from the external service. Keep in mind that when you will merge them the relevance of Algolia will be lost, because the ranking of the results will not be the same.

Hope that helps :slightly_smiling_face:

@samuel.vaillant Thank you so much brother I have achieved this already with your last 2 helpful replies.

Thank you.