Panel | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

Signature

<Panel
  // Optional parameters
  className={string}
  header={React.Node}
  footer={React.Node}
/>

About this widget

The Panel widget wraps other widgets in a consistent panel design. It also reacts by adding a CSS class when the widget no longer can refine. An example is when a RefinementList becomes empty because of the current search results.

Examples

1
2
3
4
5
import { Panel } from 'react-instantsearch-dom';

<Panel header="Header">
  <p>Panel content</p>
</Panel>

Props

className

Adds a CSS class on the root element.

1
2
3
<Panel className="myPanel">
  <p>Panel content</p>
</Panel>

header

Adds a header to the widget.

1
2
3
<Panel header="Header">
  <p>Panel content</p>
</Panel>

footer

Adds a footer to the widget.

1
2
3
<Panel footer="Footer">
  <p>Panel content</p>
</Panel>