React Modal Plugin
A simple plugin for create modal for React.js
Features
- Custom style on components
- Dynamic display control
Get started
Requirements
- React 18.2.0+
Installation
- Using npm
npm install @matthieumelin/mm-react-modal
- Using yarn
yarn add @matthieumelin/mm-react-modal
Usage
-
isOpen
(boolean): variable controlling the display of the modal -
message
(string): custom message written on the modal -
onConfirm
(function): action triggered when clicking on the 'closed' icon (& triggered on clicking outside the modal if no action is provided for this action). -
customModal
(object): custom background of the modal -
customCloseButton
(object): custom style of the close button -
customMessage
(object): custom style of the message written on the modal -
customContainer
(object): custom style of the modal -
onClickOutside
(function): action triggered when clicking outside the modal
App.js (default)
import React, { useState } from "react";
import Modal from "@matthieumelin/mm-react-modal";
const App = () => {
const [modalIsOpen, setModalIsOpen] = useState(false);
return (
<div className="App">
<div onClick={() => setModalIsOpen(!modalIsOpen)}>
Click here to open modal
</div>
<Modal
message={"Employeee Created!"}
isOpen={modalIsOpen}
onConfirm={toggleModal}/>
</div>
);
}
export default App;
App.js (with custom style)
import React, { useState } from "react";
import Modal from "@matthieumelin/mm-react-modal";
const App = () => {
const [modalIsOpen, setModalIsOpen] = useState(false);
return (
<div className="App">
<div onClick={() => setModalIsOpen(!modalIsOpen)}>
Click here to open modal
</div>
<Modal customCloseButton={{
position: "absolute",
right: -10,
top: -10,
width: 15,
height: 15,
display: "flex",
justifyContent: "center",
alignItems: "center",
padding: 15,
borderRadius: 100,
}}
customMessage={{ textAlign: "center", width: "100%" }}
customContainer={{ position: "relative", height: 50, width: 400 }}
message={"Employeee Created!"}
isOpen={modalIsOpen}
onConfirm={toggleModal}/>
</div>
);
}
export default App;