react-overlay-component

renders an overlay/modal.

Install

``bash
npm install --save react-overlay-component
`

Usage

`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 (



);
}
`

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-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 |

$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 |

License

MIT © binodswain