2.0.4 • Published 5 years ago
react-simple-overlay v2.0.4
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) |
Storybook
The stories for the component can be found here.
To run these stories:
- Clone the repository
- Run
npm install
to install dependencies - 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