2.7.0 • Published 2 years ago
@matthieumelin/mm-react-modal v2.7.0
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 modalmessage
(string): custom message written on the modalonConfirm
(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 modalcustomCloseButton
(object): custom style of the close buttoncustomMessage
(object): custom style of the message written on the modalcustomContainer
(object): custom style of the modalonClickOutside
(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;