melaniem-react-modal-component v0.1.1

Modal React Component

Description

This component will allow you to implement and customize a modal easily in your React application.

How to use the component

Install

Install the component throught your terminal with the command 'npm i melaniem-react-modal-component'

Import

import {Modal} from "melaniem-react-modal-component";

Settings

You will manage the state of the modal using a State as following:

const [modalOpened, setModal] = useState(false);

You can then directly set the Modal (setModal) into the event that will display the modal or create two functions as following if needed:

function openModal() {
    setModal(true);
}

function closeModal() {
    setModal(false);
}

Implement

Insert the following to implement the modal into your code. If the state modalOpened=true then it shows the modal, otherwise it will not.

{modalOpened ? (<Modal closeModal={closeModal} message="Modal opened! "/>):(null)}

'closeModal' passes the closing event of the modal in its parameters, so that when you click on the close button it will set the State to false.

'message' allows you to personnalize the message.

More info

Detailed function of my modal

function Modal({closeModal, message}){

    return(
        <div className="modal_background">
            <div className="modal_content">
                <button className="modal_closeButton" onClick={closeModal}>✖</button>
                <p className="modal_body">{message}</p>
            </div>
        </div>
    )
}

Detailed CSS that you can easily adapt

.modal_background{
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.75);
}

.modal_content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
    width: 100%;
    max-width: 500px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    padding: 10px;    
}

.modal_closeButton {
    position: absolute;
    /* display: block; */
    right: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    /* opacity: 1; */
    cursor: pointer;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    z-index: 10;
}


.modal_body {
    padding: 15px 8%;
    margin: 15px auto;
    color: #000000;
}