InstantSearch / React / V6 / API reference

Panel | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

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

Copy 
1
2
3
4
5

import { Panel } from 'react-instantsearch-dom';

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

Props

className

Optional
Type: string

Adds a CSS class on the root element.

Copy 
1
2
3

<Panel className="myPanel">
  <p>Panel content</p>
</Panel>
Optional
Type: React.Node

Adds a header to the widget.

Copy 
1
2
3

<Panel header="Header">
  <p>Panel content</p>
</Panel>
Optional
Type: React.Node

Adds a footer to the widget.

Copy 
1
2
3

<Panel footer="Footer">
  <p>Panel content</p>
</Panel>
Did you find this page helpful?