Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: ability to specify id for container (#489)
  • Loading branch information
cyntler committed Apr 25, 2022
1 parent dcc0c74 commit 3e09b5c
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 1 deletion.
30 changes: 30 additions & 0 deletions react-responsive-modal/__tests__/index.test.tsx
Expand Up @@ -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();
});
});
});
8 changes: 7 additions & 1 deletion react-responsive-modal/src/index.tsx
Expand Up @@ -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
*/
Expand Down Expand Up @@ -177,6 +181,7 @@ export const Modal = React.forwardRef(
role = 'dialog',
ariaDescribedby,
ariaLabelledby,
containerId,
modalId,
onClose,
onEscKeyDown,
Expand Down Expand Up @@ -322,6 +327,7 @@ export const Modal = React.forwardRef(
/>
<div
ref={refModal}
id={containerId}
className={cx(
classes.modalContainer,
center && classes.modalContainerCenter,
Expand Down

0 comments on commit 3e09b5c

Please sign in to comment.