Numbers Produce Meaning

    react-overlay-component

    1.0.2 • Public • Published

    release open-issues Test Status Build Status license

    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

    Install

    npm i react-overlay-component

    DownloadsWeekly Downloads

    282

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    25.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • binodswain