react-hooks-use-modalをNext.jsで使う

こんにちは、hiro08です。

Next.jsでreact-hooks-use-modalを使ったときのメモです。react-hooks-use-modalはmicroCMSのOrganizationで運営されています。興味がある方はご覧ください。

github.com

結論として、useModalのdomNodeを変更することで使うことができます。 useModalで返されるModal componenは内部でReact-Portalを使っています。なので、Next.jsのroot div (__next) をdomNodeに設定します。以下は実装例。

import { useModal } from "react-hooks-use-modal";

export const Modal: React.VFC = () => {
  const [Modal, open, close, isOpen] = useModal("__next", {
    preventScroll: true,
    closeOnOverlayClick: true,
  });
  return (
    <div>
      <p>Modal is Open? {isOpen ? "Yes" : "No"}</p>
      <button onClick={open}>OPEN</button>
      <Modal>
        <div>
          <h1>Title</h1>
          <p>This is a customizable modal.</p>
          <button onClick={close}>CLOSE</button>
        </div>
      </Modal>
    </div>
  );
};

github.com