Loosely coupled modal implementation

loosely-coupled-modal-imp.tsx

import useModal from "@/components/modal";

const App = () => {
  const AppModal = useModal({
    Body: (props) => (
      <>
        <h1>Hello from my modal!</h1>
        <button onClick={props.close}>Close</button>
      </>
    ),
  });

  return(
  <>
    <button onClick={AppModal.open}>Open Modal</button>
    <AppModal.Modal />
  </>);
};