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 [email protected]: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