Theme

npm_versionnpm Paragon package page

A generic component for creating accessible modal popup objects.

Note that ModalPopup expects DOM node, not ref, in order to be able to update when the node changes. A proper way to implement this is to use callback refs with useState hook as in the example below.

Basic Usage

Any Paragon component or export may be added to the code example.

With arrow

The arrow modifier positions an inner element of the modal popup so it appears centered relative to the reference.

Any Paragon component or export may be added to the code example.

Extra props supplied to ModalPopup are passed through to an underlying PopperElement component.

Theme Variables (SCSS)#

$modal-inner-padding: 1.5rem !default;
$modal-inner-padding-bottom: .7rem !default;
$modal-footer-margin-between: .5rem !default;
$modal-dialog-margin: 1.5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: 0 !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $border-color !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding-y: 1rem !default;
$modal-header-padding-x: 1.5rem !default;
$modal-close-container-top: .625rem !default;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default;
$modal-footer-padding-y: 1rem !default;
$modal-footer-padding-x: 1.5rem !default;
$modal-footer-padding: $modal-footer-padding-y $modal-footer-padding-x !default;
$modal-xl: 1140px !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 400px !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
$modal-transition: transform .3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;

Props API#

ModalPopup Props API
  • children node Required

    Specifies the contents of the modal

  • onClose func Required

    A callback function for when the modal is dismissed

  • isOpen bool Required

    Is the modal dialog open or closed

  • isBlocking bool

    Prevent clicking on the backdrop or pressing Esc to close the modal

    Defaultfalse
  • withPortal bool

    Insert modal into a different location in the DOM

    Defaultfalse
  • positionRef func | shape {
    current: shape {},
    }

    Specifies an element near which the modal should be displayed

    Defaultnull
  • placement PopperElement.propTypes.placement

    Specifies position according to the element that the positionRef prop points to

    Default'bottom-start'
  • hasArrow bool

    Caret to the modal popup pointing to the target

    Defaultfalse
ModalCloseButton Props API
  • as elementType

    Specifies the base element

    DefaultButton
  • children node

    Specifies the content of the button

    Defaultnull
  • className string

    Specifies class name to append to the base element

  • onClick func

    Specifies the callback function when the close button is clicked

Usage Insights#

ModalCloseButton

Project NameParagon VersionInstance Count
frontend-app-account22.10.01
frontend-app-learner-dashboard22.9.01

ModalPopup

Project NameParagon VersionInstance Count
frontend-app-account22.10.01
frontend-app-admin-portal21.13.11
frontend-app-course-authoring22.8.14
frontend-app-discussions22.7.02
frontend-app-learner-dashboard22.9.01
frontend-app-learning22.10.01
frontend-component-header-edx21.13.11
frontend-component-header22.10.01