Modal

    Love them or hate them, <Modal /> provides a solid foundation for creating dialogs, lightboxes, or whatever else. The Modal component renders its children node in front of a backdrop component.

    The Modal offers a few helpful features over using just a <Portal/> component and some styles:

    • Manages dialog stacking when one-at-a-time just isn't enough.
    • Creates a backdrop, for disabling interaction below the modal.
    • It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
    • It disables scrolling of the page content while open.
    • Adds the appropriate ARIA roles are automatically.
    • Easily-pluggable animations via a <Transition/> component.

    Note that, in the same way the backdrop element prevents users from clicking or interacting with the page content underneath the Modal, screen readers also need to be signaled to not to interact with page content while the Modal is open. To do this, we use a common technique of applying the aria-hidden='true' attribute to the non-Modal elements in the Modal container. This means that for a Modal to be truly modal, it should have a container that is outside your app's React hierarchy (such as the default: document.body).

    import Modal from 'react-overlays/Modal'

    autoFocus

    When true The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any Modal children that have the autoFocus prop.

    Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen readers.

    type:boolean
    default:true

    backdrop

    Include a backdrop component.

    type:truefalse'static'
    default:true

    backdropTransition

    A react-transition-group@2.0.0 <Transition/> component used to control animations for the backdrop components.

    type:ReactComponentType<intersection<{ in: boolean; appear?: boolean; unmountOnExit?: boolean; }, TransitionCallbacks>>

    children

    type:ReactReactElement

    className

    type:string

    container

    A DOM element, a ref to an element, or function that returns either. The Modal is appended to it's container element.

    For the sake of assistive technologies, the container should usually be the document body, so that the rest of the page content can be placed behind a virtual backdrop as well as a visual one.

    type:DOMContainer

    containerClassName

    A css class or set of classes applied to the modal container when the modal is open, and removed when it is closed.

    type:string

    enforceFocus

    When true The modal will prevent focus from leaving the Modal while open.

    Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen readers.

    type:boolean
    default:true

    keyboard

    Close the modal when escape key is pressed

    type:boolean
    default:true

    manager

    A ModalManager instance used to track and manage the state of open Modals. Useful when customizing how modals interact within a container

    type:ModalManager

    onBackdropClick

    A callback fired when the backdrop, if specified, is clicked.

    type:(e: ReactSyntheticEvent) => void

    onEnter

    Callback fired before the Modal transitions in

    type:function

    onEntered

    Callback fired after the Modal finishes transitioning in

    type:function

    onEntering

    Callback fired as the Modal begins to transition in

    type:function

    onEscapeKeyDown

    A callback fired when the escape key, if specified in keyboard, is pressed.

    If preventDefault() is called on the keyboard event, closing the modal will be cancelled.

    type:(e: KeyboardEvent) => void

    onExit

    Callback fired right before the Modal transitions out

    type:function

    onExited

    Callback fired after the Modal finishes transitioning out

    type:function

    onExiting

    Callback fired as the Modal begins to transition out

    type:function

    onHide

    A callback fired when either the backdrop is clicked, or the escape key is pressed.

    The onHide callback only signals intent from the Modal, you must actually set the show prop to false for the Modal to close.

    type:() => void
    default:() => {}

    onShow

    A callback fired when the Modal is opening.

    type:() => void

    renderBackdrop

    A function that returns a backdrop component. Useful for custom backdrop rendering.

    type:(props: RenderModalBackdropProps) => ReactReactNode
    default:(props: RenderModalBackdropProps) => <div {...props} />

    renderDialog

    A function that returns the dialog component. Useful for custom rendering. Note: the component should make sure to apply the provided ref.

    renderDialog={props => <MyDialog {...props} />}
    type:(props: RenderModalDialogProps) => ReactReactNode

    restoreFocus

    When true The modal will restore focus to previously focused element once modal is hidden

    type:boolean
    default:true

    restoreFocusOptions

    Options passed to focus function when restoreFocus is set to true

    type:{ preventScroll: boolean; }

    role

    type:string
    default:'dialog'

    show

    Set the visibility of the Modal

    type:boolean
    default:false

    style

    type:ReactCSSProperties

    transition

    A react-transition-group@2.0.0 <Transition/> component used to control animations for the dialog component.

    type:ReactComponentType<intersection<{ in: boolean; appear?: boolean; unmountOnExit?: boolean; }, TransitionCallbacks>>