This project is a React plugin allowing to display an alert in other words a pop up information.
Contains a smoth animation while appear on the screen and can be controlled by keyboard.
https://www.npmjs.com/package/react-modal-oth
$ npm i react-modal-oth
$ yarn add react-modal-oth
- Import module :
import Modal from "react-modal-oth";
- Create your state in your component:
const [modalIsOpen, setModalIsOpen] = useState(true);
- Render your Modal in your component:
return <Modal icon={icon} closeIcon={close_icon} show={modalIsOpen} setShow={setModalIsOpen} title={"Well done!"} text={"Employee was successfully created!"} />;
- icon : svg component used in the Modal (decoration purpose).
Import the svg component as:
import icon from "react-modal-oth/dist/assets/icon.svg";
- closeIcon : svg component used in the Modal - close icon.
Import the svg component as:
import close_icon from "react-modal-oth/dist/assets/close.svg";
- show : Boolean state use to show and hide the Modal
- setShow : function that updates the state
- title : Modal heading
- text: additional text information
import "./style.css";
const Modal = ({ icon, closeIcon, show, setShow, title, text }) => {
const handleKeydown = useCallback((e) => {
if (e.type === "click" || e.key === "Escape" || e.key === "Enter") {
setShow(false);
}
}, []);
useEffect(() => {
document.addEventListener("keydown", handleKeydown);
return () => {
document.removeEventListener("keydown", handleKeydown);
};
}, []);
return (
show && (
<>
<div className="wrapper-modal">
<div className="modal">
<div className="modal-icon">
<img src={icon} alt="" />
</div>
<img className="modal-close-icon" src={closeIcon} alt="" onKeyPress={(e) => handleKeydown(e)} onClick={(e) => handleKeydown(e)}></img>
<h1 className="modal__title">{title}</h1>
<p className="modal__text">{text}</p>
<div className="wrapper-btn">
<button type="button" className="btn" onClick={(e) => handleKeydown(e)}>
OK{" "}
</button>
</div>
</div>
</div>
</>
)
);
};