react-simplemodal-component v1.0.28
react-simplemodal-component
A simple react modal popUp. MIT licence.
Installation
npm install react-simplemodal-component
example and props:
You can override any of the default css properties in the component props (look at the js code example below)
- 'myPopupContainerStyle' is the page blocker that contains the modal (the background under the modal). Clicking on the blocker will close the modal.
- 'myPopupBodyStyle' styles the modal.
- 'myPopupCloseButtonStyle' is here to place and style the close button of the modal.
'fadeanimduration' will determine the duration of the fade in animation (set it to 0 to disable the fading transition)
'openModal' is required in the props, it is initialized in the state openModal.
- 'text' is a string that will define the content of the modal.
'closePopup' is required, it will fire the function when you close the modal.
Place the openPopup function on the button (onClick={() => openPopup()}) that will open the modal.
Pressing the escape key on your keyboard will close the modal.
import React from "react";
import PopUpModalComponent from "../lib/components/PopUpComponent";
import { useState } from "react";
const App = () => {
const [openModal, setOpenModal] = useState(false);
const openPopup = () => {
setOpenModal(true);
}
return (
<div style={{ width: 640, margin: "15px auto" }}>
<button
onClick={() => openPopup()}
className="popupButton">Popup</button>
<div>
<PopUpModalComponent
myPopupBodyStyle={{borderRadius: "10px", backgroundColor: 'rgba(246, 162, 179, 0.8)'}}
myPopupContainerStyle={{backgroundColor: "rgba(40, 40, 40, 0.5)"}}
myPopupCloseButtonStyle={{backgroundColor: "rgba(200, 40, 40, 1)", borderRadius: "50px", position:"absolute", right: "-10px", top:"-10px"}}
fadeanimduration="2s"
openModal={openModal}
text={'popUp'}
closePopup={() => setOpenModal(false)}
/>
</div>
</div>
)
}
export default App;
default css :
.popup-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
}
.popup-body {
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
min-width: 200px;
max-width: 30%;
bottom: 20%;
text-align: center;
margin: auto;
padding-left : 13px;
padding-right : 13px;
border-radius: 15px;
border-color: black;
background: white;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.popClosebutton{
margin-left: 10px;
cursor: pointer;
}
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago