react-modal-ez v1.0.2

react-modal-ez

Try using modals easily and simply in React with react-modal-ez!

Installation

Please install using the following command.

$ npm install react-modal-ez
$ yarn add react-modal-ez

Using

Before using react-modal-ez, first use ModalProvider in App.tsx

// app.tsx
import { ModalProvider } from "react-modal-ez";

function App({ children }: PropsWithChildren) {
  return (
    <ModalProvider>
      {children}
      // ...rest
    </ModalProvider>
  );
}

export default App;

You can use the useModal hook to declaratively use modals without including the modal JSX in the return statement.

// example.tsx
import { useModal } from "react-modal-ez";
import MyModal from "./MyModal.tsx";

function MyExample() {
  const { isOpen, open, close } = useModal();

  const handleOnClick = () => {
    open(<MyModal />, {
      // options (is optional)
    });
  };

  return (
    <>
      <button onClick={handleOnClick}>open</button>
      <button onClick={close}>close</button>
    </>
  );
}

export default MyExample;

Options

You can pass the following options through the second parameter of useModal.