simpletext-modal-react

Modal for Project 14 OpenClassrooms

About

A simple modal React component. For display simple text Keep the default theme or chose your modal style.

Show demo : demo.romainchardon.fr

Github / Website

Install

npm install --save simpletext-modal-react

Usage

import React, {useState} from "react";

// Import simpletext-modal
import {Modal} from "simpletext-modal-react";

function Exemple() {
    // Set State
    const [show, setShow] = useState(false);
    const [message, setMessage] = useState("");

    const handleClickShowModal = () => {
        setShow(true); // Set true for dispay modal
        setMessage('Exemple message !'); // Add your message
    }

    // If you want to create a custom modal style
    const customStyle = styled.div`
        background: green;
    `

    return (
        <div>
            <button onClick={handleClickShowModal}>
                show modal
            </button>
            </div>
            // Usage Modal component
            <Modal
                show={show}
                close={() => setShow(false)}
                message={message}
                customStyle={customStyle} // optional
            />
        </div>
    )
}

export default Exemple;