Easy-Modal-Dialog

This modal is designed to fit according to the parent component's size, providing a seamless user experience.

Installation

npm i easy-modal-dialog

Usage

import React, { useState } from "react";
import EasyModal from "easy-modal-dialog";
function App() {
  const [open, setOpen] = useState(false);
  const handleClose = () => setOpen(false);
  const Body = (
    <>

      <h5>I am a Modal which can wrap over any Element</h5>
    </>
  );
  return (
  <div>
  <EasyModal open={open} onClose={handleClose} body={Body} />
  </div>
  );
}
)

Features

1. The modal is centered within the parent component, ensuring that it is always visible to the user.
2. The modal adapts to the size of the parent component, providing an optimal viewing experience on any screen.
3. The modal can be easily triggered by a button or link, allowing for a smooth transition between the parent component and the modal.

Browser Support

This modal has been tested and is compatible with the latest versions of Chrome, Firefox, Safari, and Edge.

About Author

Official NPM Package