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).

let rand = () => Math.floor(Math.random() * 20) - 10;

const Backdrop = styled("div")`
  position: fixed;
  z-index: 1040;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  opacity: 0.5;
`;

// we use some pseudo random coords so nested modals
// don't sit right on top of each other.
const RandomlyPositionedModal = styled(Modal)`
  position: fixed;
  width: 400px;
  z-index: 1040;
  top: ${() => 50 + rand()}%;
  left: ${() => 50 + rand()}%;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  padding: 20px;
`;

function ModalExample() {
  const [show, setShow] = useState(false);

  const renderBackdrop = (props) => <Backdrop {...props} />;

  return (
    <div className="modal-example">
      <button
        type="button"
        className="btn btn-primary mb-4"
        onClick={() => setShow(true)}
      >
        Open Modal
      </button>
      <p>Click to get the full Modal experience!</p>

      <RandomlyPositionedModal
        show={show}
        onHide={() => setShow(false)}
        renderBackdrop={renderBackdrop}
        aria-labelledby="modal-label"
      >
        <div>
          <h4 id="modal-label">Text in a modal</h4>
          <p>
            Duis mollis, est non commodo luctus, nisi erat
            porttitor ligula.
          </p>
          <ModalExample />
        </div>
      </RandomlyPositionedModal>
    </div>
  );
}

<ModalExample />;

let rand = () => Math.floor(Math.random() * 20) - 10;
const Backdrop = styled("div")`
  position: fixed;
  z-index: 1040;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  opacity: 0.5;
`;
// we use some pseudo random coords so nested modals
// don't sit right on top of each other.
const RandomlyPositionedModal = styled(Modal)`
  position: fixed;
  width: 400px;
  z-index: 1040;
  top: ${() => 50 + rand()}%;
  left: ${() => 50 + rand()}%;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  padding: 20px;
`;
function ModalExample() {
  const [show, setShow] = useState(false);
  const renderBackdrop = (props) => <Backdrop {...props} />;
  return (
    <div className="modal-example">
      <button
        type="button"
        className="btn btn-primary mb-4"
        onClick={() => setShow(true)}
      >
        Open Modal
      </button>
      <p>Click to get the full Modal experience!</p>
      <RandomlyPositionedModal
        show={show}
        onHide={() => setShow(false)}
        renderBackdrop={renderBackdrop}
        aria-labelledby="modal-label"
      >
        <div>
          <h4 id="modal-label">Text in a modal</h4>
          <p>
            Duis mollis, est non commodo luctus, nisi erat
            porttitor ligula.
          </p>
          <ModalExample />
        </div>
      </RandomlyPositionedModal>
    </div>
  );
}
<ModalExample />;

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.

renderBackdrop={props => <MyBackdrop {...props} />}

renderBackdrop={props => <MyBackdrop {...props} />}

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>>

Modal

#API

#autoFocus

#backdrop

#backdropTransition

#children

#className

#container

#containerClassName

#enforceFocus

#keyboard

#manager

#onBackdropClick

#onEnter

#onEntered

#onEntering

#onEscapeKeyDown

#onExit

#onExited

#onExiting

#onHide

#onShow

#renderBackdrop

#renderDialog

#restoreFocus

#restoreFocusOptions

#role

#show

#style

#transition

API

autoFocus

backdrop

backdropTransition

children

className

container

containerClassName

enforceFocus

keyboard

manager

onBackdropClick

onEnter

onEntered

onEntering

onEscapeKeyDown

onExit

onExited

onExiting

onHide

onShow

renderBackdrop

renderDialog

restoreFocus

restoreFocusOptions

role

show

style

transition