API Reference / React InstantSearch Widgets / Panel
Aug. 23, 2019
Widget 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
type: string
Optional

Adds a CSS class on the root element.

1
2
3
<Panel className="myPanel">
  <p>Panel content</p>
</Panel>
header
type: React.Node
Optional

Adds a header to the widget.

1
2
3
<Panel header="Header">
  <p>Panel content</p>
</Panel>
type: React.Node
Optional

Adds a footer to the widget.

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

HTML output

1
2
3
4
5
<div class="ais-Panel">
  <div class="ais-Panel-header">Header</div>
  <div class="ais-Panel-body">Panel content</div>
  <div class="ais-Panel-footer">Footer</div>
</div>

Did you find this page helpful?