Setup

Wrap your top level component with the ModalProvider

React

main.jsx

import { ModalProvider } from "async-modal-react";

ReactDOM.createRoot(document.getElementById("root")).render(
    <ModalProvider>
        <App />
    </ModalProvider>,
);

Next.js

pages/_app.jsx

import { ModalProvider } from "async-modal-react";

export default function MyApp({ Component, pageProps }) {
    return <ModalProvider>
             <Component {...pageProps} />
           </ModalProvider>
    }

with props

main.jsx

<ModalProvider
  closeOnOutsideClick={true} // default: true, close modal when clicking outside of the modal
  disableBodyScrollWhenOpen={true} // default: true, disable body scroll when modal is open
  closeOnRouteChange={true} // default: true, close modal when route changes (exactly close on popstate event from window)
>
  // ...
</ModalProvider>

Done! Now you can use the useModal hook to open and close modals.