react-modal-oth
v0.1.6
Published
Plugin allowing to display an alert
Downloads
9
Readme
Modal app - pop up plugin
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.
Installation
$ npm i react-modal-oth $ yarn add react-modal-oth
How the plugin works
- 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!"} />;
<Modal/> params:
- 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
Example
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>
</>
)
);
};