feat: ability to specify id for container (#489)

Author: cyntler

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(
+        <Modal open onClose={() => null} containerId={containerId}>
+          <div>modal content</div>
+        </Modal>
+      );
+
+      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(
+        <Modal open onClose={() => null} modalId={modalId}>
+          <div>modal content</div>
+        </Modal>
+      );
+
+      const modal = getByTestId('modal');
+      expect(modal.getAttribute('id')).toBe(modalId);
+      expect(document.getElementById(modalId)).toBeInTheDocument();
+    });
+  });
 });

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(
             />
             <div
               ref={refModal}
+              id={containerId}
               className={cx(
                 classes.modalContainer,
                 center && classes.modalContainerCenter,