2.0.4 • Published 5 years ago

react-simple-overlay v2.0.4

Weekly downloads
6
License
MIT
Repository
github
Last release
5 years ago

react simple-overlay

An overlay react component that can be used as a modal

npm.io npm.io npm.io

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

PropTypeRequiredDescription
visiblebooleanYesDetermines whether the overlay should be visible or not
widebooleanNoIf true the overlay will have a wider width of 720px instead of default 480px
disableCloseInternalbooleanNoIf 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
onCloseInternalFunctionYesWhen 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

VariableDescriptionDefault value
--overlay-bgThe backdrop color of the overlay#000000d8
--overlay-animation-durationThe duration for the open and close animations0.5s
--overlay-widthThe width of the overlay480px (720px for wide overlays)

Storybook

The stories for the component can be found here.

To run these stories:

  1. Clone the repository
  2. Run npm install to install dependencies
  3. Run npm run storybook to start the storybook server.

For more information on Storybook, click here

Maintainers

Support

If you'd like to support this project, you can do so by becoming a patreon on Patreon

It would be really helpful if you can star the project on Github

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago