Just A Modal

Sometimes you just need a simple modal, to either get a confirmation before deleting something or to present some info to a user. This is one. You won't get 500 npm modules added to your project with this.

• zero dependencies
• overlay automatically added to dim the background
• small, currently around 16KB
• easy to get started with and use

Installation

npm install --save just-a-modal

Usage

import React, { useState } from 'react';
import JustAModal from 'just-a-modal';

const [modalInfo, setModalInfo] = useState({
    showModal: false,
    actionID: '',
    action: '',
    config: {}
});

const handleDelete = (id) => {
    let modalInfo = {
        showModal: true,
        actionID: id,
        action: 'deleteBook',
        config: {}
    };

    setModalInfo(modalInfo);
};

const handleCancel = () => {
    let modalInfo = {
        showModal: false,
        actionID: '',
        action: '',
        config: {}
    };

    setModalInfo(modalInfo);
};

const handleAction = (actionID) => {
    if(modalInfo.action === 'deleteBook'){
        //api call to delete book with id of actionID
        //after it completes, close the modal
        handleCancel();
    }
};

<JustAModal modalInfo={modalInfo} handleCancel={handleCancel} handleAction={handleAction} />

with an actionID set:

set actionID to 0 and modal will change from a delete confirmation to a info box:

|modalInfo|| |---|---| |showModal|boolean true to show the modal, false to hide it| |actionID|id of item to delete. if missing, modal will be be an info modal| |action|action that you want to perform if user clicks ok| |config|object, modal config options|

|config|| |---|---| |title|default for confirmation is "Alert", info is "Info"| |body|default for confirmation is "Are you sure?", info needs a body| |buttonOKText|default is "OK"| |buttonDeleteText|default is "Delete"| |buttonCancelText|default is "Cancel"|

config:{
    title: 'Alert!!',
    buttonDeleteText: 'I am super sure'
}