diff --git a/types/react-modal/index.d.ts b/types/react-modal/index.d.ts index 3ca3b6865e..fe1a2fdf23 100644 --- a/types/react-modal/index.d.ts +++ b/types/react-modal/index.d.ts @@ -37,6 +37,19 @@ declare namespace ReactModal { modal?: boolean | 'false' | 'true'; } + /** Describes overlay and content element references passed to onAfterOpen function */ + interface OnAfterOpenCallbackOptions { + /** overlay element reference */ + overlayEl: Element; + /** content element reference */ + contentEl: HTMLDivElement; + } + + /** Describes unction that will be run after the modal has opened */ + interface OnAfterOpenCallback { + (obj?: OnAfterOpenCallbackOptions): void; + } + interface Props { /* Boolean describing if the modal should be shown or not. Defaults to false. */ isOpen: boolean; @@ -63,7 +76,7 @@ declare namespace ReactModal { appElement?: HTMLElement | {}; /* Function that will be run after the modal has opened. */ - onAfterOpen?(): void; + onAfterOpen?: OnAfterOpenCallback; /* Function that will be run after the modal has closed. */ onAfterClose?(): void; diff --git a/types/react-modal/react-modal-tests.tsx b/types/react-modal/react-modal-tests.tsx index 0e515f21c6..2820234ef1 100644 --- a/types/react-modal/react-modal-tests.tsx +++ b/types/react-modal/react-modal-tests.tsx @@ -11,7 +11,12 @@ class ExampleOfUsingReactModal extends React.Component { contentRef: HTMLDivElement; overlayRef: HTMLDivElement; render() { - const onAfterOpenFn = () => { }; + const reactModalRef = React.useRef(); + // typed params of `OnAfterOpen` callback + const onAfterOpenFn: ReactModal.OnAfterOpenCallback = ({ contentEl, overlayEl }) => { + console.assert(contentEl === reactModalRef.current.portal.content); + console.assert(overlayEl === reactModalRef.current.portal.overlay); + }; const onAfterCloseFn = () => { }; const onRequestCloseFn = (event: React.MouseEvent | React.KeyboardEvent) => { }; const customStyle: ReactModal.Styles = { @@ -85,11 +90,19 @@ class ExampleOfUsingReactModal extends React.Component { const MyWrapperComponent: React.FC = () => { const reactModaRef = React.useRef(); + // typed params of `OnAfterOpen` are optional for backward compatible types + const onAfterOpenOptionalObjFn = () => {}; React.useLayoutEffect(() => { reactModaRef.current.portal.overlay.getAttribute('foo'); reactModaRef.current.portal.content.focus(); }); - return Hello, World!; + return ( + + Hello, World! + + ); };