HeroUI-modal-provider

A fork of mui-modal-provider — but adapted for HeroUI-compatible modals (e.g. from @heroui/react,@heroui/modal) and modern UI frameworks.

HeroUI-modal-provider is a helper based on Context API and React Hooks for simplified work with modals (dialogs) built on HeroUI or custom solutions with suitable props.

Huge thanks to the original mui-modal-provider maintainers for the clean architecture and API inspiration.
This fork brings full support for <Modal /> from HeroUI and async control.

📦 Installation

npm install heroui-modal-provider
# or
yarn add heroui-modal-provider

🚀 Quick Start

import { ModalProvider, useModal } from "heroui-modal-provider";
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from "@heroui/react";

const MyModal = ({ isOpen, onClose }) => (
  <Modal isOpen={isOpen} onClose={onClose}>
    <ModalContent>
      {(close) => (
        <>
          <ModalHeader>My Modal</ModalHeader>
          <ModalBody>This modal is controlled via modal-provider.</ModalBody>
          <ModalFooter>
            <Button color="primary" onPress={close}>Close</Button>
          </ModalFooter>
        </>
      )}
    </ModalContent>
  </Modal>
);

function App() {
  const { showModal } = useModal();

  return (
    <Button onPress={() => showModal(MyModal)}>
      Open Modal
    </Button>
  );
}

// in root
<ModalProvider>
  <App />
</ModalProvider>

💡 Access Modals Anywhere with getModal()

Want to show modals from outside component? Use getModal():

import { getModal } from "heroui-modal-provider";
import MyModal from "./MyModal";

// Wrap your App first
<ModalProvider>
    <App/>
</ModalProvider>

const showModal = ()=>{
    getModal()?.showModal(MyModal, { title: "Hello" });
}

💡 If You’re Using Next.js

Show Modals Anywhere (with Dynamic Import)

Want to open a modal outside the React tree in Next.js? Use getModal() with dynamic import:

import dynamic from "next/dynamic";
import { getModal } from "heroui-modal-provider";

const showModal = async () => {
    // Dynamically import the modal with SSR disabled
    const MyModal = await import("./MyModal").then((mod) => mod.default);
    getModal()?.showModal(MyModal, { title: "Hello" });
};

// Wrap your app with <ModalProvider> in _app.tsx
<ModalProvider>
    <Component {...pageProps} />
</ModalProvider>

Internally, this uses a modal-nexus registry that syncs the current modal context. Once <ModalProvider> is mounted, getModal() exposes:

• showModal(Component, props?, options?)
• hideModal(id)
• destroyModal(id)
• updateModal(id, nextProps)

Returned modal instances also include:

const modal = showModal(...);

modal.hide();
modal.destroy();

🧩 Modal Options

All modal-related methods accept optional options:

🔧 Advanced Usage

• Use updateModal(id, props) to patch a modal
• Use destroyModalsByRootId(rootId) to batch remove grouped modals
• Use disableAutoDestroy: true in useModal() to persist modals manually

Made by Cr0WD