0.1.5 • Published 4 years ago
simple-react-modal-easy-use v0.1.5
Simple React Modal Easy Use
This is package contains a simple React Modal that is easy to use and manipulate.
Installation
Npm:
npm i simple-react-modal-easy-useYarn:
yarn add simple-react-modal-easy-useHow to use
import Modal from 'simple-react-modal-easy-use';
...
...
<Modal
open={open}
closeModal={onClose}
>
<h1>Modal Content</h1>
</Modal>Props
| Prop Name | Description | Required | Type | Default Value |
|---|---|---|---|---|
| open | Indicates if the modal is open or not | true | boolean | undefined |
| closeModal | Function called when modal should be closed | true | boolean | undefined |
| closeOnEsc | Indicates if modal should be closed when esc is pressed | false | boolean | true |
| closeOnClickOutside | Indicates if modal should be closed when clicked outside of modal content | false | boolean | true |
| modalClassName | ClassName to manipulate modal style | false | string | simple-react-modal |
| modalStyle | Object containing css style of modal | false | object | {} |
| backgroundClassName | ClassName to manipulate background style | false | string | simple-react-modal-background |
| backgroundStyle | Object containing css style of background | false | object | {} |
| hasBackground | Indicates if contains a background behind modal | false | boolean | true |
Default CSS Style
.simple-react-modal {
width: fit-content;
height: fit-content;
background: white;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
border-radius: 5px;
}
.simple-react-modal-background {
width: 100vw;
height: 100vh;
z-index: 1;
background: rgba(190, 195, 204, 0.5);
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}