react-modal-ez

Example

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;

Using

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

interface ModalOptions {
  position?:                      // (default: "center") , Position of the modal on the screen.
    | "top-left"
    | "top-center"
    | "top-right"
    | "left"
    | "center"
    | "right"
    | "bottom-left"
    | "bottom-center"
    | "bottom-right";
  top?: string | number;          // Distance from the top of the screen (in pixels or percentage).
  left?: string | number;         // Distance from the left of the screen (in pixels or percentage).
  right?: string | number;        // Distance from the right of the screen (in pixels or percentage).
  bottom?: string | number;       // Distance from the bottom of the screen (in pixels or percentage).
  dimmed?: boolean;               // (default: true) , Whether to dim the background behind the modal.
  closeOnDimmedClick?: boolean;   // (default: true) , Whether the modal should close when the dimmed background is clicked.
  closeOnEscape?: boolean;        // (default: true) , Whether the modal should close when the Escape key is pressed.
  scrollable?: boolean;           // (default: false) , Whether the background behind the modal should be scrollable when the modal is open.
  dimmedClassName?: string;       // Optional CSS class name to apply to the modal container for custom styling.
  modalClassName?: string;        // Optional CSS class name to apply to the dimmed container for custom styling.
}