Function that exposes Modalfy's API outside of React's context.


  • Do not use if you're inside a React component. Please consider useModal() or withModal() instead.

  • You can't pass a modalName to closeModal() to close a modal that's not the currently displayed one. This is due to a current API limitation especially in the case where you'd have several modals with the same name opened, as Modalfy can't safely determine which one you wanted to close.

The object returned by modalfy()is covered in ModalProp.

const modalfy = <
  P extends ModalfyParamsm,
  M extends keyof P
>(): UsableModalProp<P> => {
  const context: UsableModalProp<P> = React.useContext(ModalContext)
  return {
    closeAllModals: ModalState.closeAllModals,

    closeModal: () => ModalState.closeModal(),

    closeModals: (modalName: M) => ModalState.closeModals(modalName),

    currentModal: ModalState.getState<P>()?.currentModal,

    openModal: (modalName: M, params?: P[M]) =>
      ModalState.openModal(modalName, params, true),

If you're using TypeScript and have your params types, you can get some nice autocomplete by utilising modalfy()like this:

import { ModalStackParamsList } from 'App'
// ...
const { openModal } = modalfy<ModalStackParamsList>()

Last updated