react-simple-modal-controller

Installation

npm install react-simple-modal-controller

Setting

import { ModalProvider } from "react-simple-modal-controller";
const App = () => {
 return <ModalProvider>...</ModalProvider>;
};

Usage

basic modal

import { modal } from "react-simple-modal-controller";
const Page = () => {
 const openModal = () => {
 modal.open(ModalComponent, { title: "test" });
 };
 
 ...
 return <button onClick={openModal}>modal open</button>;
};
const ModalComponent = ({ title }: { title: string }) => {
 return (
 <div className="modal">
 <h2>{title}</h2>
 <button
 onClick={() => {
 // something work
 modal.close();
 }}
 >
 ok
 </button>
 <button onClick={modal.close}>cancel</button>
 <button onClick={openModal}>nesting modal open</button>
 </div>
 );
};

async modal

import { modal } from 'react-simple-modal-controller';
const Page = () => {
 const openAsyncModal = async () => {
 try {
 const isOk = await modal.openAsync<boolean>(AsyncModalComponent, {
 userId: 123,
 });
 if(isOk) {
 ...
 } else {
 ...
 }
 } catch (error) {
 ...
 }
 };
 ...
 return <button onClick={openAsyncModal}>asyncModal open</button>
};
const AsyncModalComponent = ({ resolve, userId }: { resolve: (value: boolean) => void; userId: number }) => {
 return (
 <div className="modal">
 <button onClick={() => resolve(true)}>
 ok
 </button>
 <button onClick={() => resolve(false)}>
 cancel
 </button>
 </div>
 );
};

Playground