React-instantsearch: Have a header prop for each widget

In instantsearch you can show headers for each widget, but that is missing from this project. Perhaps its something that can be added?

Usually “widgets” in most GUI environments come with their headers so I think it makes sense to introduce it here as well.

Another benefit is that the widget hides and shows depending on results; keeping the header in the widget can also show / hide the header is sync with the widget.

What do you all think?

Hello @ishan.raychaudhuri and thank you for posting this feedback.

Right now you if you want to achieve this you will need to use the connector available for each widget and then add your header.

For example if you want to add a title to a refinement list you will need to use the connectRefinementList connector, implement your own refinement list, and that way add the logic of keeping/hiding the title.

That being said, this is not an ideal solution and we want to go further than this. We think about creating a <Panel/> widget that will be able to wrap any widget with the purpose to do just what you described. Currently we are only at the stage of discussing it, but we need to tackle this use case. What do you think about it?

Also, if you want to implement this with connectors and you need help, don’t hesitate to reach us :slight_smile:

<Panel /> is a nice idea.

Widget however implies a kind of container with a heading and a box (keeping in mind the earlier instantsearch widgets and wordpress widgets etc.). Perhaps you should think of renaming them to components?

<Panel/> will probably be used in the same way as <ScrollTo/>. It's not really a widget but its description is under the same section. Maybe in the future we will need to introduce a new term but I'm not sure aboutcomponents` as they already are everywhere :D.

Let me detail the semantic we currently have:

We use the term Widgets to designate components that integrate a specific search concept with a built-in UI.

We also have the term Connectors to designate Higher Order Components that you can use to wrap your own components. Those are encapsulating the logic for a specific search concept but let you do the rendering of your choice. Widgets are just connected components.

Finally, we have the term InstantSearch root component. This component provides a way for connected components to interact with the search state.

Cool that makes sense. Will the Panel component be out soon?

I can’t provide you an ETA right now but as soon as we wrote the api proposal then I can link the url here and you will be able to follow the advancement :wink:

Cool thank you so much. :smiley:

@ishan.raychaudhuri, you can find the API proposal for the <Panel/> here: https://github.com/algolia/instantsearch.js/issues/1881 :slight_smile:

Hi I see the Panel component is merged into v2. Any idea on when its gonna be live?

Also can I do something like this:

const MyMenu = (props) =>
    <HierarchicalMenu {...props} />

const ConnectedMenu = connectHierarchicalMenu(MyMenu)

Using it like so:

<InstantSearch appId="latency" apiKey="3d9875e51fbd20c7754e65422f7ce5e1" indexName="bestbuy">
    <ClearAll />

    <ConnectedMenu id="categories" key="categories" attributes={[ 'category', 'subcategory']} />

    <Hits />
</InstantSearch>

This gives me this error: Cannot declare two hierarchical facets with the same name: category

@ishan.raychaudhuri This looks like a different issue than the current topic, can you open a GitHub issue with all the needed reproducible code? Thanks.

As for Panel availability: very soon :slight_smile: