> For the complete documentation index, see [llms.txt](https://docs.feathery.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feathery.io/develop/react/api-guide/form/popupoptions.md).

# PopupOptions

### Overview

Specify popup options in your embedded [\<Feathery.Form>](/develop/react/api-guide/form.md) to easily display it as a popup over existing content rather than inline with the content.

Behavior-wise, the form will appear over your existing content. Any visible content below will be darkened and blurred, and users will be able to exit the popup by clicking outside of it or the `X` in the top-right corner.

<figure><img src="/files/Wumks47BH6gdvz2YdKdt" alt=""><figcaption></figcaption></figure>

### Usage <a href="#usage" id="usage"></a>

Both of the `PopupOptions` parameters, the `show` flag and `onHide` callback function, must be specified in order for the popup to work properly.

```typescript
import { useState } from 'react';
import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', 'support@feathery.io');
  const [showPopup, setShowPopup] = useState(false);

  // Show the `aBcDeF` Feathery form as a popup that
  // appears when button `showForm` is clicked
  return <>
    <button id='showForm' onClick={() => setShowPopup(true)}/>
    <Form
      formId='aBcDeF'
      popupOptions={{
        show: showPopup,
        onHide: () => setShowPopup(false),
      }}
    />
  </>
}
```

### PopupOptions parameters

|    Key   |     Type     | Description                                                                                                                                                                                                                |
| :------: | :----------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|  `show`  |   `boolean`  | Whether the Feathery popup form should currently be shown or hidden.                                                                                                                                                       |
| `onHide` | `() => void` | This callback function will be triggered when a `hide` event occurs in the popup. This occurs when the user attempts to navigate out of or close the popup. When this event occurs, you must set the `show` flag to false. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.feathery.io/develop/react/api-guide/form/popupoptions.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.