• Version 6.4.2
  • Published
  • 170 kB
  • 3 dependencies
  • MIT license


npm i react-responsive-modal
yarn add react-responsive-modal
pnpm add react-responsive-modal


A simple responsive and accessible react modal



const Modal: React.ForwardRefExoticComponent<any>;


    interface ModalProps

    interface ModalProps {}

      property animationDuration

      animationDuration?: number;
      • Animation duration in milliseconds.

        Default to 300.

      property ariaDescribedby

      ariaDescribedby?: string;
      • ARIA description for modal

      property ariaLabelledby

      ariaLabelledby?: string;
      • ARIA label for modal

      property blockScroll

      blockScroll?: boolean;
      • Whether to block scrolling when dialog is open.

        Default to true.

      property center

      center?: boolean;
      • Should the dialog be centered.

        Default to false.

      property children

      children?: React.ReactNode;

        property classNames

        classNames?: {
        root?: string;
        overlay?: string;
        overlayAnimationIn?: string;
        overlayAnimationOut?: string;
        modalContainer?: string;
        modal?: string;
        modalAnimationIn?: string;
        modalAnimationOut?: string;
        closeButton?: string;
        closeIcon?: string;
        • An object containing classNames to style the modal.

        property closeIcon

        closeIcon?: React.ReactNode;
        • Custom icon to render (svg, img, etc...).

        property closeIconId

        closeIconId?: string;
        • id attribute for the close icon button.

        property closeOnEsc

        closeOnEsc?: boolean;
        • Is the modal closable when user press esc key.

          Default to true.

        property closeOnOverlayClick

        closeOnOverlayClick?: boolean;
        • Is the modal closable when user click on overlay.

          Default to true.

        property container

        container?: Element | null;
        • You can specify a container prop which should be of type Element. The portal will be rendered inside that element. The default behavior will create a div node and render it at the at the end of document.body.

        property containerId

        containerId?: string;
        • id attribute for modal container

        property focusTrapped

        focusTrapped?: boolean;
        • When the modal is open, trap focus within it.

          Default to true.

        property initialFocusRef

        initialFocusRef?: React.RefObject<HTMLElement>;
        • Element to focus when focus trap is used.

          Default to undefined.

        property modalId

        modalId?: string;
        • id attribute for modal

        property onAnimationEnd

        onAnimationEnd?: () => void;
        • Callback fired when the Modal has exited and the animation is finished.

        property onClose

        onClose: () => void;
        • Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.

        property onEscKeyDown

        onEscKeyDown?: (event: KeyboardEvent) => void;
        • Callback fired when the escape key is pressed.

        property onOverlayClick

        onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
        • Callback fired when the overlay is clicked.

        property open

        open: boolean;
        • Control if the modal is open or not.

        property reserveScrollBarGap

        reserveScrollBarGap?: boolean;
        • Avoid unpleasant flickering effect when body overflow is hidden. For more information see

        property role

        role?: string;
        • ARIA role for modal

          Default to 'dialog'.

        property showCloseIcon

        showCloseIcon?: boolean;
        • Show the close icon.

          Default to true.

        property styles

        styles?: {
        root?: React.CSSProperties;
        overlay?: React.CSSProperties;
        modalContainer?: React.CSSProperties;
        modal?: React.CSSProperties;
        closeButton?: React.CSSProperties;
        closeIcon?: React.CSSProperties;
        • An object containing the styles objects to style the modal.

        Package Files (1)

        Dependencies (3)

        Dev Dependencies (18)

        Peer Dependencies (2)


        To add a badge like this badgeto your package's README, use the codes available below.

        You may also use to create a custom badge linking to

        • Markdown
        • HTML
          <a href=""><img src="" alt=""></a>