react-overlay-component v1.0.6

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.

configs

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

License

MIT © binodswain