react-responsive-modal

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 https://www.npmjs.com/package/body-scroll-lock

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.