confirmation-modal-lib v1.6.0

Confirmation-Modal-Lib

Get a confirmation modal for React.

• Fully responsive
• Light and simple
• Add your own text

How to install

npm install confirmation-modal-lib

How to install

• Import by adding import { ConfirmationModal } from "confirmation-modal-lib".
• Use by adding <ConfirmationModal />.
• Display the modal on changing useState to true const [showModal, setShowModal] = useState(false).

Usage

Here's an example of basic usage:

import React, { useState } from "react";
import { ConfirmationModal } from "../lib";

const App = () => {

    const [showModal, setShowModal] = useState(false);

    return (
    <div style={{ width: 640, margin: "15px auto", textAlign: "center", fontFamily: "sans-serif" }}>
        <h1>Testing confirmation modal library</h1>
        <button onClick={() => setShowModal(true)}>Show modal</button>
        <ConfirmationModal
            showModal={showModal}
            setShowModal={setShowModal}
            textContent="This is your confirmation!"
            btnContent="Ok!"
            clickClose={true}
            escapeClose={true}
            colorModal="grey"
        />
    </div>
)};

Custom styling

These class selectors allow you to change the appearance :

• confirmation-modal : contains background
• confirmation-modal__msg : for message container
• confirmation-modal__msg--close : to design close button

Props