A simple utility for managing modals in React. Based on nice-modal-react
ModalManager must be mounted at the root of the application to work correctly.
// layout.tsx
import { ModalManager } from "@whop-core/modal-manager";
interface RootLayoutProps {
children: ReactNode;
}
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en">
<body>
<main>
<ModalManager>{children}</ModalManager>
</main>
</body>
</html>
);
}This helper file has to be created due to the way pnpm module resolution works and how while @whop-core/modal-manager and the next app use the same frosted version they could be different instances and thus not share the same context.
// create-dialog.ts
import { Dialog } from "frosted-ui";
import { create } from "@whop-core/modal-manager";
export const createDialog = create(Dialog.Root);// example-modal.tsx
import { Dialog } from "frosted-ui";
import { createDialog } from "./create-dialog";
import { useModal } from "@whop-core/modal-manager";
interface ExampleModalProps {
id: string;
}
export const ExampleModal = createDialog<ExampleModalProps>(({ id }) => {
const modal = useModal();
return (
<Dialog.Content>
<Dialog.Title>{id}</Dialog.Title>
<Button onClick={modal.remove}>Close</Button>
</Dialog.Content>
);
});This is the programmatic way to show a modal
import { showModal } from "@whop-core/modal-manager";
import { ExampleModal } from "./example-modal";
const ExamplePage = () => {
return (
<Button onClick={() => showModal(ExampleModal, { id: "example" })}>
Show Modal
</Button>
);
};This is the declarative way to show a modal which will automatically show the modal when the component is mounted
import { ExampleModal } from "./example-modal";
const OtherPage = () => {
return <ExampleModal id="example" modalId="example-modal" defaultVisible />;
};