diff --git a/react-responsive-modal/__tests__/index.test.tsx b/react-responsive-modal/__tests__/index.test.tsx
index 6b794b2d..087c06a0 100644
--- a/react-responsive-modal/__tests__/index.test.tsx
+++ b/react-responsive-modal/__tests__/index.test.tsx
@@ -502,4 +502,34 @@ describe('modal', () => {
expect(onAnimationEnd).toHaveBeenCalledTimes(1);
});
});
+
+ describe('prop: containerId', () => {
+ it('should renders container div with id', async () => {
+ const containerId = 'container-id';
+ const { getByTestId } = render(
+ null} containerId={containerId}>
+ modal content
+
+ );
+
+ const containerModal = getByTestId('modal-container');
+ expect(containerModal.getAttribute('id')).toBe(containerId);
+ expect(document.getElementById(containerId)).toBeInTheDocument();
+ });
+ });
+
+ describe('prop: modalId', () => {
+ it('should renders modal div with id', async () => {
+ const modalId = 'modal-id';
+ const { getByTestId } = render(
+ null} modalId={modalId}>
+ modal content
+
+ );
+
+ const modal = getByTestId('modal');
+ expect(modal.getAttribute('id')).toBe(modalId);
+ expect(document.getElementById(modalId)).toBeInTheDocument();
+ });
+ });
});
diff --git a/react-responsive-modal/src/index.tsx b/react-responsive-modal/src/index.tsx
index cadd74ac..2427009d 100644
--- a/react-responsive-modal/src/index.tsx
+++ b/react-responsive-modal/src/index.tsx
@@ -129,9 +129,13 @@ export interface ModalProps {
*/
ariaDescribedby?: string;
/**
- * Avoid unpleasant flickering effect when body overflow is hidden. For more information see https://www.npmjs.com/package/body-scroll-lock
+ * Avoid unpleasant flickering effect when body overflow is hidden. For more information see https://www.npmjs.com/package/body-scroll-lock
*/
reserveScrollBarGap?: boolean;
+ /**
+ * id attribute for modal container
+ */
+ containerId?: string;
/**
* id attribute for modal
*/
@@ -177,6 +181,7 @@ export const Modal = React.forwardRef(
role = 'dialog',
ariaDescribedby,
ariaLabelledby,
+ containerId,
modalId,
onClose,
onEscKeyDown,
@@ -322,6 +327,7 @@ export const Modal = React.forwardRef(
/>