TopAlignedModal

Reference

• The TopAlignedModal component is use to display content aligned at the top of the screen.

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.

Usage Example

function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { TopAlignedModal } = protrakComponents;
    return(
      <TopAlignedModal 
      open={true} 
      onClose={() => console.log('Modal closed')} 
      background={true}
      >
         <p>This is top-aligned modal content.</p>
      </TopAlignedModal>
    );
}

• This renders a top-aligned modal with a dark background and logs a message when the background is clicked.