PopupOptions

Configure your form to display above the rest of your site as a popup.

Overview

Specify popup options in your embedded <Feathery.Form> 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.

Usage

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

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

function App() {
  // Initialize Feathery
  init('SDKKey', '[email protected]');
  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.