API Reference / React InstantSearch / Panel

Panel

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

import { Panel } from 'react-instantsearch-dom';
See code examples

About this widget

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

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
type: string
Optional

Adds a CSS class on the root element.
Copy 
1
2
3

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

Adds a header to the widget.
Copy 
1
2
3

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

Adds a footer to the widget.
Copy 
1
2
3

<Panel footer="Footer">
  <p>Panel content</p>
</Panel>

HTML output

Copy 
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?
React InstantSearch v6