react-overlay-component

renders an overlay/modal.

Install

npm install --save react-overlay-component

Usage

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,
        // top: `5em`,
        // 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>
    );
}

Demo

View demos: https://binodswain.github.io/react-overlay-component/

or

git clone git@github.com:binodswain/react-overlay-component.git
cd react-overlay-component

# build the package
npm install
npm build

# run example
cd example
npm install
npm start

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

configs

const configs = {
    animate: true,
    top: `5em`,
    clickDismiss: false,
    escapeDismiss: false,
    focusOutline: true,
    contentClass: "container overlay-content",
};

key	type	optional	default val	description
animate	boolean	true	true	toggles overlay animation
top	string	true	0	top value for overlay
clickDismiss	boolean	true	true	enables to close the overlay on clicking backdrop
escapeDismiss	boolean	true	true	enables to close the overlay on pressing ESC key
focusOutline	boolean	true	false	addes an outline around the overlay-content div
contentClass	string	true	''	additional class to add in overlay-content div

License

MIT © binodswain