Skip to main content

Modal

Reference​

  • The Modal component is use for displaying modal dialogs.

Props​

  1. children

    • Type: ReactNode
    • Description: The content to display inside the modal.

  2. onClose

    • Type: function
    • Description: Callback function triggered when the modal background is clicked.

  3. open

    • Type: boolean
    • Description: Controls the visibility of the modal. If false, the modal is not rendered.

  4. background

    • Type: boolean
    • Description: If true, applies a dark background overlay behind the modal.

  5. zIndex

    • Type: string
    • Description: Customizes the z-index of the modal for layering.

Usage Example​


function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { Modal } = protrakComponents;
    return(
        <Modal 
        open={true} 
        onClose={() => console.log('Modal closed')} 
        background={true}>
            <p>This is modal content.</p>
        </Modal>
    );
}
  • This renders a modal with a dark background and logs a message when the background is clicked.