npm package to render overlay/modal with backdrop
npm install react-overlay-component




renders an overlay/modal.
``bash`
npm install --save react-overlay-component
`jsx
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 (
text content
Sample header
className="danger"
onClick={() => {
setOverlay(false);
}}
>
close modal
Demo
View demos: https://binodswain.github.io/react-overlay-component/
or
`bash
git clone git@github.com:binodswain/react-overlay-component.git
cd react-overlay-componentbuild the package
npm install
npm buildrun 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 |
$3
`js
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 |
MIT © binodswain