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
- The modal is centered within the parent component, ensuring that it is always visible to the user.
- The modal adapts to the size of the parent component, providing an optimal viewing experience on any screen.
- 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.