ModalPopup

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.

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

Theme Variables (SCSS)#

// Modals
// Padding applied to the modal body
$modal-inner-padding: 1.5rem !default;
// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
$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;
// Keep this for backwards compatibility
$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;
// Keep this for backwards compatibility
$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;
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 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'
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