Menu
Menu Sheet Overlay
Search
Search Sheet

Modal Manager and Actions

    This article is split into two major sections. The first covers the features of the Modal Manager in detail, and the second covers all the actions that the Progressive Web SDK provides for showing and hiding modals.

    This article does not detail the React components used by modals, nor is this a basic, guided introduction to using modals in a PWA. For those, please see the Sheet component and Getting Started: Adding a Modal documentation.

    Modal Manager view options #

    The Modal Manager comes with a few features that give you more control over how a modal behaves. These features can be passed as options to an object in the MODAL_VIEWS list:

    // web/app/modals/index.jsx
    const MODAL_VIEWS = {
        [EXAMPLE_MODAL]: {
            content: <ExampleModal />,
            duration: 200,
            prerender: false,
            startsPersistent: false
        },
    }
    

    content: React.Component, the component that will render when the modal is open.

    duration: integer, a custom duration in milliseconds for the open/close animation.

    prerender: boolean, determines whether the sheet renders while closed. Pre-rendering modals continue to render in the DOM but remain visually hidden. Useful for showing content to search engine crawlers.

    startsPersistent: boolean, determines whether the sheet remains open on a route change. When persistence is applied in this manner, it only works the first time it’s opened. Subsequent open/closes will leave the modal in a non-persistent state (as normal).

    Actions #

    All actions are imported as follows:

    import {
        openModal,
        closeModal,
        openPersistentModal,
        closeAllModals,
        persistModal,
        preRenderModal
    } as modalAction from 'progressive-web-sdk/dist/store/modals/actions'
    

    Their purpose and behavior is described below.

    openModal(id, analyticsName) #

    Opens the given modal.

    If your project is using the Lockup component then it is considered good practice to use the action defined in your project that both locks the application and opens the modal: openModal (same name) in web/app/modals/actions.js

    id: string, the unique identifier for a given modal.

    analyticsName: string, a name for the analytics event triggered by this action.

    returns: function, passed to a dispatch


    closeModal(id, analyticsName) #

    Closes the given modal.

    If your project is using the Lockup component then it is considered good practice to use the action defined in your project that both locks the application and opens the modal: closeModal (same name) in web/app/modals/actions.js

    id: string, the unique identifier for a given modal.

    analyticsName: string, a name for the analytics event triggered by this action.

    returns: function, passed to a dispatch


    openPersistentModal(id, analyticsName) #

    Opens the given modal and sets it to be persistent (doesn’t close during a route change).

    id: string, the unique identifier for a given modal.

    analyticsName: string, a name for the analytics event triggered by this action.

    returns: function, passed to a dispatch


    closeAllModals() #

    Closes all modals.

    returns: function, passed to a dispatch


    persistModal(id, analyticsName) #

    Sets the given modal to be persistent.

    id: string, the unique identifier for a given modal.

    analyticsName: string, a name for the analytics event triggered by this action.

    returns: function, passed to a dispatch


    preRenderModal(id, analyticsName)

    Sets the given modal to pre-render. The prerender state means that the modal, when inactive/closed, will still render its markup in the DOM. This is useful situations where you want the DOM visible for things like search engine crawlers.

    id: string, the unique identifier for a given modal. analyticsName: string, a name for the analytics event triggered by this action. returns: function, passed to a dispatch