<p>React OverlayPanel is a container component that can overlay other components on page.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { OverlayPanel } <span class="hljs-keyword">from</span> <span class="hljs-string">'primereact/overlaypanel'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Basic"</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{(e)</span> =&gt;</span> op.current.toggle(e)} /&gt;

<span class="hljs-tag">&lt;<span class="hljs-name">OverlayPanel</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{op}</span>&gt;</span>
    // Content
<span class="hljs-tag">&lt;/<span class="hljs-name">OverlayPanel</span>&gt;</span>
</code></pre>
<h3 id="dismissable-and-closeicon">Dismissable and CloseIcon</h3>
<p>Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior. Additionally enablign showCloseIcon property displays a close icon at the top right corner to close the panel.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">OverlayPanel</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{op}</span> <span class="hljs-attr">showCloseIcon</span> <span class="hljs-attr">dismissable</span>&gt;</span>
    // Content
<span class="hljs-tag">&lt;/<span class="hljs-name">OverlayPanel</span>&gt;</span>
</code></pre>
<h3 id="theming">Theming</h3>
<p>OverlayPanel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/overlaypanel">OverlayPanel</a> showcase for demos and documentation.</p>


React OverlayPanel is a container component that can overlay other components on page.

### Setup

Refer to PrimeReact [setup documentation](https://primefaces.org/primereact/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import { OverlayPanel } from 'primereact/overlaypanel';
``` 

### Getting Started

OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.

```html
<Button type="button" label="Basic" onClick={(e) => op.current.toggle(e)} />

<OverlayPanel ref={op}>
    // Content
</OverlayPanel>
```

### Dismissable and CloseIcon

Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior. Additionally enablign showCloseIcon property displays a close icon at the top right corner to close the panel.

```html
<OverlayPanel ref={op} showCloseIcon dismissable>
    // Content
</OverlayPanel>
```

### Theming

OverlayPanel supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

Visit the PrimeReact [OverlayPanel](https://primefaces.org/primereact/showcase/#/overlaypanel) showcase for demos and documentation.
