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