React-simple-overlay NPM

react simple-overlay

An overlay react component that can be used as a modal

Install

npm i -D react-simple-overlay

Usage

If you are upgrading from v1, please see the Migration guide

The display of an overlay is controlled by a prop or state variable in the host component.

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

const MyComponent = () => {
    const [open, setOpened] = useState(false);

    return (
        <div>
            <button className="btn btn-primary btn-sm" onClick={() => setOpened(true)}>
                Open overlay
            </button>

            <Overlay visible={open} wide={false} disableCloseInternal={false} onCloseInternal={() => setOpened(false)}>
                <div className="card">
                    <h2>This is a normal overlay</h2>
                    <p>Overlay content</p>
                </div>
            </Overlay>
        </div>
    );
};

When the overlay is open, clicking the backdrop (I.e. the dark area outside of its content) or pressing the escape key will close it

Props

Prop	Type	Required	Description
`visible`	`boolean`	Yes	Determines whether the overlay should be visible or not
`wide`	`boolean`	No	If `true` the overlay will have a wider width of 720px instead of default 480px
`disableCloseInternal`	`boolean`	No	If `true` clicking the backdrop or pressing the escape key will not close the overlay. This is useful if you are integrating the overlay into another component which should not respond to those events
`onCloseInternal`	`Function`	Yes	When the user clicks the backdrop or presses the escape key, the close animation is played. This function is called when the close animation ends. This should be used to reset the visible state variable in the host component.

Customization

The Overlay component makes use of certain CSS variables that allow to customize its appearance

Variable	Description	Default value
--overlay-bg	The backdrop color of the overlay	#000000d8
--overlay-animation-duration	The duration for the open and close animations	0.5s
--overlay-width	The width of the overlay	480px (720px for wide overlays)