react-overlay-component

Demo

default overlay usage:

More demo

Usage

Install the package.

npm install --save react-overlay-component

Import the package.

import Overlay from "react-overlay-component";

example:

import React, { useState } from "react";
import Overlay from "react-overlay-component";

function App() {
    const [isOpen, setOverlay] = useState(false);

    const closeOverlay = () => setOverlay(false);

    const configs = {
        animate: true,
        // clickDismiss: false,
        // escapeDismiss: false,
        // focusOutline: false,
    };

    return (
        <div>
            <button
                className="primary"
                onClick={() => {
                    setOverlay(true);
                }}
            >
                open modal
            </button>

            <Overlay configs={configs} isOpen={isOpen} closeOverlay={closeOverlay}>
                <h2>Sample header</h2>
                <p>text content</p>

                <button
                    className="danger"
                    onClick={() => {
                        setOverlay(false);
                    }}
                >
                    close modal
                </button>
            </Overlay>
        </div>
    );
}

Props

react-overlay-component requires isOpen, configs(optional), closeOverlay(optional) as props.

prop	type	optional	description
isOpen	boolean	false	flag to toggle the overlay
configs	object	true	config object to customize overlay behavior
closeOverlay	function	true	function that sets isOpen to false

Learn more about config