react-overlay-component
renders an overlay/modal.
Install
npm install --save react-overlay-component
Usage
import React useState from "react";import Overlay from "react-overlay-component"; { const isOpen setOverlay = ; const closeOverlay = ; const configs = animate: true // top: `5em`, // clickDismiss: false, // escapeDismiss: false, // focusOutline: false, ; return <div> <button ="primary" = > open modal </button> <Overlay = = => <h2>Sample header</h2> <p>text content</p> <button ="danger" = > close modal </button> </Overlay> </div> ;}
Demo
View demos: https://binodswain.github.io/react-overlay-component/
or
git clone git@github.com:binodswain/react-overlay-component.gitcd react-overlay-component # build the package npm installnpm build # run example cd examplenpm installnpm 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 |
configs
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