Code for the modal window plugin created for the OpenClassrooms project. See Links section below.
React, CSS, JavaScript.
- In the main project directory run the following command:
npm i react-data-table-component
- In the component where plugin will be used import it as:
import ModalPlugin from "employee-hr-records-application-modal-plugin"
- Use it as a standard component and pass the following props (setOpenModal must be defined using useState to add the functionality to open/close the modal):
showModal={setOpenModal}
modalText="Text of the modal is here"
- By default the following styling is applied (name of each object is the name of the appropriate prop):
ModalPlugin.defaultProps = {
modalContainerStyle: {
position: "fixed", width: "100vw", height: "100vh", top: "50%", left: "50%", zIndex: "2", transform: "translate(-50%, -50%)", backgroundColor: "rgba(0, 0, 0, 0.7)",
},
modalWindowStyle: {
position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)",
},
modalTextStyle: {
width: "200px", zIndex: "3", borderRadius: "10px", boxShadow: "0 5px 20px 0 rgba(0, 0, 0, 0.5)", padding: "20px", backgroundColor: "#fff", fontSize: "1.5rem", textAlign: "center",
},
modalBtnStyle: {
cursor: "pointer", position: "fixed", top: "22%", left: "98%", transform: "translate(-50%, -50%)", borderRadius: "50%", backgroundColor: "#000", color: "#fff", padding: "5px 8px", border: "1px solid #000", fontWeight: "bold",
},
};
- To change the style of any of the modal elements, use the appropriate prop (see above). Make sure to add all of the properties from the default values, then add/change those that need to be changed.